Vue 开发实践为本人的最佳实践，非业内最佳，仅用于提供给各位做参考，这是系列文，但发布时间和内容不固定。
一般推荐使用 配置式路由 进行应用的路由管理，主要是这样的灵活性较高，但有些框架也会封装支持 文件约定路由，这里不做过多的说明。
Vue Router 是 Vue.js 官方的路由管理器，其文档有较为详细的说明。
路由配置
正常而言，路由只需要配置 path 和 component 字段即可，如:
import Welcome from '@/views/Home/Welcome.vue'
export default [
{
path: '/',
component: Welcome
}
]
路由元信息
但因业务的需要，meta 也是大家用的比较多的一个属性，主要提供给不同的场景使用:
- 菜单控制
- 授权认证
敬请期待
于是你的配置就变成这样:
import Welcome from '@/views/Home/Welcome.vue'
export default [
{
path: '/',
component: Welcome,
meta: {
title: '欢迎页',
bypass: true // 不需要任何权限
}
},
{
path: '/posts',
component: () => import('@/views/Posts/Search.vue'),
meta: {
title: '文章列表',
requiresAuth: true, // 用于判断此页面是否需要登录
},
}
]
魔法注释
有时候，我们为了应用加载快，将路由进行懒加载操作，这样用户第一次打开，只有首页相关的代码，打开速度就会很快。
于是你的路由配置可能就是这样配置的:
import Welcome from '@/views/Home/Welcome.vue'
export default [
{
path: '/',
component: Welcome
},
{
path: '/posts',
component: () => import('@/views/Posts/Search.vue')
},
{
path: '/posts/:postId',
component: () => import('@/views/Posts/Content.vue')
}
]
你如果查看请求，你会发现点击 /posts 会加载一次 js 文件，点击 posts/1 又会加载一次 js 文件，原因就是 import 进来的文件，会被拆分独立的 js 文件。
点击某些页面，反而有延迟问题，因为在加载模块文件。
🌰 列表和详情合并合并成一个文件
通常我们进入文章列表，那很大概率会查看详情，此时我们希望只加载一次 js 文件，这样打开详情就会快很多。
那如何解决这个问题呢？答案就是 webpack 的 魔法注释。
如此，我们的配置就修改为:
export default [
{
path: '/',
component: Welcome
},
{
path: '/posts',
component: () => import(/* webpackChunkName: "posts" */'@/views/Posts/Search.vue'),
}
{
path: '/posts/:postId',
component: () => import(/* webpackChunkName: "posts" */'@/views/Posts/Content.vue'),
}
]
我们设置 webpackChunkName 之后，这样列表和详情就会被合并为一个 js 文件，被一起加载了。
注意 如果设置不成功，检查下是否存在 单词拼写错误，或缺少引号，冒号