跳转页面
安装指定版本3.0.3
新建router.js文件。
在main导入router.js
base:process.env.BASE_URL获取目录路径 vue.config.js里的默认路径
路由文件pages。
/后面的文件名就是path
路由跳转方式:
1,a标签
2,router-link (to:到哪里去 tag:可以将router-link渲染成某个标签)
子路由的切换:用replace
路由嵌套
children:[子路由]
在主组件使用router-view
路由的优化:
1,路由懒加载:
为了要给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。
定义:延迟加载,按需加载。
方式:vue异步组件和ES中的import。
路由守卫
最常用的全局守卫:beforEach。放在main.js里
用于登录时的验证
参数:
to:去哪
from:从哪
next:下一个
独享守卫:
在router.js里的
组件内守卫:
Update:应用场景,购物车里的待付款,待评价。。。(主子路由)
异步问题用setTimeout(()=>{
},100);
解决方案:vue,react都可以用
创建空页面skip。
beforeRouteLeave:导航离开时
解决方法1,2,页面离开执行:(首选)
router.beforeEach((to, from, next) => {
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0
next()
})