本文章讲解vue3基础路由配置（完整代码放在最后）

  1、 安装vue-router包        

npm i vue-router --save

2、在目录下创建router文件夹 用于存放router配置

3、接下来我们就要开始书写路由文件的配置了，这里面我们基础的需要实现两部操作

1.  创建并路由实例
2.  写路由配置

我们会用到createRouter、createWebHistory、createHashWebHistory和defineAsyncComponent几个方法

createRouter接收一个RouterOptions类型的参数用来初始化router，RouterOptions这个参数包含history, routes,scrollBehavior 等

history是配置路由历史的type，官方文档是这样说的

其实从我们使用浏览器的认知来看，我们接触到的大多数的链接都是 history模式的，不是hash模式

基本的路由控制代码

const router = craeteRouter({
    history: createWebHistory(),
    routes: [
      {
          path: '/',
          name: 'helloWorld',
          components: defineAsyncComponent(() => import('@/views/HelloWorld.vue')),
          meta: {
              title: 'hello_world'
          } // meta用于提供一些路由用到的配置，例如这是页面名称、页面是否需要鉴权
      }
    ]
})

接下来和vue2一样 写一个简单的路由守卫

router.beforeEach((from, to, next) => {
    //一般路由守卫中会做一些鉴权和权限控制的事情
    if (to.meta && to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

最后一步 将这个router导出，然后在main.ts中引入

app.use(router)

或者可以导出一个函数

export function setRouter(app: App<Element>) {
    app.use(router)
}

然后在main.ts中调用这个函数，传入APP 这样会优雅一点

这样一个简单的router配置就好了， 如果页面很多我们，路由文件很多 我们就要给路由文件进行抽象，封装到不同的module，然后使用 import.meta.globEager()一起倒入，

如果路由守卫过于复杂也要单独起文件用于路由守卫处理，然后通过出口文件一起引用，最后导出一个router

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'helloWord',
      component: defineAsyncComponent(() => import(`../views/helloWrod/index.vue`))
    },
    {
      path: '/login',
      name: 'login',
      component: defineAsyncComponent(() => import(`../views/User/login.vue`))
    },
    {
      path: '/hello_word',
      name: 'helloWord',
      component: defineAsyncComponent(() => import(`../views/helloWrod/index.vue`)),
      children: [
        {
          path: '/hello_word_view',
          name: 'helloWordView',
          component: defineAsyncComponent(() => import(`../views/helloWrod/detail.vue`)),
        },
        {
          path: '/hello_word_view2',
          name: 'helloWordView2',
          component: defineAsyncComponent(() => import(`../views/helloWrod/detail2.vue`)),
        }
      ]
    }
  ]
})
// 全局路由守卫
router.beforeEach((to, from, next)=>{
  // console.log(to, from)
  if (to.meta.title) {
    document.title = `${to.meta.title}`;
  }
  next()
})

export default router