vite现在创建的vue项目已经默认为vue3了，但是在引入vue-router时，可能会有vue-router报错问题，一直提示createRouter为undefined或者其他的关于vue-router报错的问题，主要原始是vue-router版本问题，直接升级到最新版本即可：

1
pnpm add vue-router@next

项目配置

创建router目录新建index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/page1.vue'),
        meta: {
            title: 'Home'
        }
    },
    {
        path: '/page2',
        name: 'Page2',
        component: () => import('../views/page2.vue'),
        meta: {
            title: 'Page2'
        }
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

main.ts文件配置

1
2
3
4
5
6
7
8
9
10
11
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { setupStore } from './store'

async function bootStrap() {
  const app = createApp(App)
  setupStore(app)
  app.use(router).mount('#app')
}
bootStrap()

路由守卫配置

router目录下创建guard.ts

1
2
3
4
5
6
7
8
9
import { Router } from 'vue-router'

export const setupRouterGuard = (router: Router) => {
  router.beforeEach((to, from, next) => {
    // @ts-ignore
    document.title = to.meta.title // 路由对应的网页标签title
    next()
  })
}

router目录下的index.ts文件配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { setupRouterGuard } from './guard'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/page1.vue'),
    meta: {
      title: 'Home'
    }
  },
  {
    path: '/page2',
    name: 'Page2',
    component: () => import('../views/page2.vue'),
    meta: {
      title: 'Page2'
    }
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
setupRouterGuard(router)
export default router