(1)页面跳转数据传递使用路由参数
页面跳转,例如 A 页面跳转到 B 页面,需要将 A 页面的数据传递到 B 页面,推荐使用路由参数进行传参,而不是将需要传递的数据保存 vuex,然后在 B 页面取出 vuex 的数据,因为如果在 B 页面刷新会导致 vuex 数据丢失, 导致 B 页面无法正常显示数据。
例如:
let id = '123';
this.$router.push({
name: 'userCenter',
query: {
id: id
}
});
(2)使用路由懒加载(延迟加载)机制
{
path: '/uploadAttachment',
name: 'uploadAttachment',
meta: {
title: '上传附件',
},
component: () => import('@/view/components/uploadAttachment/index.vue')
}
(3)router 中的命名规范
path,childrenPoints 命名规范采用 kebab-case 命名规范(尽量vue文件的目录结构保持一致,因为目录名,文件名都是 kebab-case,这样很方便找到对应的文件)
name 命名规范采用 KebabCase 命名规范且和component组件名保持一致!(因为要保持 keep-alive 特性, keep-alive 按照 component 的 name 进行缓存,所以两者必须高度保持一致)
(4)router 中的 path 命名规范
path 除了采用 kebab-case 命名规范以外,必须以 / 开头, 即使是 children 里的 path 也是要以 / 开头。这是因为如果某个页面有问题,需要立刻找到这个 vue 文件,如果不以 / 开头, path 为 parent 和 children 组成的, 可能经常需要在 router 文件里搜索多次才能找到, 而如以 / 为开头,则能立刻搜索到对应的组件。
{
path: '/flie',
name: 'File',
component: Main,
meta: {
title: '文件服务',
icon:'ios-cloud-upload'
},
children: [
{
path: '/file/file-list',
name: 'FileList',
component: () => import(@/views/file/file-list.vue)
}
]
}