路由配置

1.创建路由

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

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文件夹中包含所有的路由文件

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

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

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页面等。

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.配置切换路由动画