vue多页面共用一个路由

Vue多页面应用可以共用一个路由，但需要注意一些细节。

首先，需要在每个页面的入口文件中（如main.js）创建一个新的Vue实例，并将其挂载到对应的DOM节点上。例如，对于两个页面分别为page1.html和page2.html，可以分别在它们的入口文件中写入如下代码：

page1.html：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

page2.html：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

注意，这里的router是在每个页面中都需要单独引入和创建的。另外，$mount方法用来将Vue实例挂载到页面上的DOM节点上，需要传入一个CSS选择器作为参数。

接下来，需要在每个页面的路由配置文件中（如router.js）定义对应的路由规则。由于每个页面的路由规则可能不同，因此需要分别定义。例如，对于page1.html和page2.html的路由规则分别如下：

page1.html的router.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

page2.html的router.js：

import Vue from 'vue'
import Router from 'vue-router'
import Contact from './views/Contact.vue'
import News from './views/News.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    },
    {
      path: '/news',
      name: 'news',
      component: News
    }
  ]
})

最后，在每个页面的App.vue组件中，需要添加一个标签，用来渲染对应的路由组件。例如，对于page1.html和page2.html的App.vue组件分别如下：

page1.html的App.vue：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

page2.html的App.vue：

<template>
  <div>
    <router-link to="/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
    <router-view></router-view>
  </div>
</template>

注意，这里的标签用来生成路由链接，to属性指定了要跳转到的路由路径。

这样，每个页面就可以共用一个路由了。当用户在页面1中点击路由链接跳转到页面2时，Vue会自动根据路由规则和组件定义渲染对应的组件。