直接上代码了 有详细注释 每一行都有 仔细读一下就懂了
// 路由文档
// 1、导入路由 导入Vue进行挂载
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);
// 2、导入组件进行路由懒加载 (否则可能会出现首页白屏问题并且也会造成很大性能问题)|| 量大的话写个js文件写好路由 然后类似模块一样进行导入进来
// 3、写路由规则配置项
const router = new Router({
mode: 'history', // 路由模式 取值histort & hash 区别一个无#号一个有#号 一个兼容性好一个兼容性不好 上线后也会存在#号需要后端配合
base: '/', // 打包路径，默认为/，可以修改
routes: [
// 登录页 正常来说无二级路由 无参数 所以配置项少
{
path: '/login', // 路径
name: 'login', // 名称
component: () => import('@/layout/login'), // 加载组件(懒加载)
// 或者异步组件 异步加载 component:(resolve)=>require(['组件路径'],resolve),
},
// 首页 首页一般就有导航 有布局了 布局通常将 main内容放入二级路由中 这里也写个示例
{
path: '/home',
name: 'Home',
hidden: true, // 常常见到自定义的属性 我理解为是标识操作 判断是否加载一些组件或做导航栏权限 不过this.$route时查看不到 只能点语法点出来
component: () => import('@/layout/index'),
children: [
// app页面一级页面出口
// layout/index 页面就是二级路由出口 layout要写好router-view 并且布局好
{
path: '/era',
name: 'era',
props: { default: true, sidebar: false }, // 路由传参 不过这种方式 不习惯使用
meta: { title: '标题', id: '001', show: false }, // 路由元信息 可以通过meta写标识 保存变量等操作 可以从路由表中拿到 也可以做在路由守卫中做处理等
component: () => import('@/views/era/index'),
},
],
},
// 默认重定向
{
path: '/',
redirect: '/home',
},
// 默认404、一定要放在最下面 因为先走上面的代码 如上代码没有匹配到 则渲染 * 号 进入404
{
path: '*',
name: 'error',
component: () => import('@layout/404'),
},
],
});
// 4、导出
export default router;
// 全局守卫
router.beforeEach((to, from, next) => {}); // 前置导航 核心回调函数 to from next
router.afterEach((to, from) => {}); // 后置导航 没有 next
// 组件守卫
const vm = new Vue();
vm.beforeRouteEnter((to, from, next) => {}); // 进入路由之前
vm.beforeRouteUpdata((to, from, next) => {}); // 路由更新时
vm.beforeRouteLeave((to, from, next) => {}); // 离开路由之前
// 扩展
/**
* 1、数据获取
* 导航完成之后获取：created() 组件钩子函数
* 导航完成之前获取：beforeRouteEnter() 组件守卫中获取数据 当数据获取成功后调用 next 放行
*
* 2、路由过渡
*
*
*
*
* 3、滚动行为 scrollBehavior (to, from, savedPosition){ // return 期望滚动到哪个的位置 }
* 使用前端路由 当切换到新路由时 想要页面滚到顶部 或者是保持原先的滚动位置
* 就像重新加载页面那样 vue-router能做到而且更好 它让你可以自定义路由切换时页面如何滚动
* savedPosition回调 => 只有当这是一个 popstate 导航时才可用（由浏览器的后退/前进按钮触发）
* 如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。
*
* 示例一：简单处理
* scrollBehavior(to, from, savedPosition) {
* // 始终滚动到顶部 其他示例 支持的功能都在官网
* return { top: 0 }
* // 或者你可以返回一个 CSS选择器或一个DOM元素在这种情况下 top 和 left 将被视为该元素的相对偏移量
* return {
* // el: document.getElementById('main'),
* el: '#mainB',
* top: -10
* }
* },
* 示例二：延迟滚动 => 滚动前等待 500ms
* scrollBehavior(to, from, savedPosition) {
* return new Promise((resolve,reject) = > {
* setTimeout(() = > {
* resolve({ left: 0, top: 0 })
* },500)
* })
* },
*
*
* 4、使用webpack 把组件按组分块
*
*
* 5、检测重定向
* await router.push('/my-profile')
* if (router.currentRoute.value.redirectedFrom) {
* // redirectedFrom 是解析出的路由地址，就像导航守卫中的 to和 from
* }
*
* 6、动态路由
* router.addRoute() 添加路由
* router.removeRoute() 删除路由
*/
