> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/cottonweb/3.-pei-zhi-qian-duan-lu-you.md).

# 路由配置

## 1.创建路由

首先在`main.js`文件中引入`vue-router`和路由对象，之后将路由配置挂载到根实例中

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //挂载到vue对象中
import router from '@/routers/' //路由配置对象

new Vue({
  router, //挂载到根实例对象app上，这里必须叫router，也可以router:其他名字
  render: (h) => h(App),
}).$mount('#app')
```

## 2.批量注册路由

首先在`routers`文件夹中包含所有的路由文件

```bash
--common.js 通用路由配置文件
--people.js 具体项目路由文件
--index.js 引入其他路由文件
```

在`index.js`中引入所有的路由文件

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

let routes = []
const requireContext = require.context('./', true, /\.js$/) //加载其他路由文件
requireContext.keys().forEach((filename) => {
  if (filename === './index.js') {
    return
  }
  const routeModule = requireContext(filename) // 获取文件内容
  routes = [...routes, ...routeModule.default] // 合并两个数组内容
})
const router = new VueRouter({
  routes,
})  //生成router实例

//最后添加404守卫路由
router.addRoutes([
  {
    path: '*',
    name: '404',
    component: () => import('@/views/404.vue'),
  },
])

//配置全局路由守卫
router.beforeEach((to, from, next) => {
  Nprogress.start()
  document.title = from.meta.title
  next()
})
router.afterEach((to, from) => {
  console.log(from.name)
  document.title = to.meta.title
  Nprogress.done()
})
export default router
```

## 3.路由配置

例如我在`common.js`文件中，配置了项目中通用的一些路由；包括404页面等。

```javascript
export default [
  {
    path: '/404',
    name: 'pge404',
    component: () => {
      return import('../views/404.vue') //引入404组件
    },
    meta: { title: '404' },
  },
]
```

在这里我遇到了一个不起眼的小问题，就是在使用箭头函数导入404组件的时候，没有用return导致这个路由无效了

> 错误代码

`component: () => { import('../views/404.vue') //引入404组件 },`

## 4.配置切换路由动画