这是我参与「第四届青训营 」笔记创作活动的第13天
最近在做项目时 发现对路由的知识有所遗忘 于是打算复习并简单记录一下💾
基本路由
//router配置
import VueRouter from 'vue-router';
import About from '@/pages/About';
import History from '@/pages/History';
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/history',
component:History
}
]
});
tips
- 路由组件通常存放在pages文件夹中，一般组件通常存放在components文件夹。
- 通过切换，‘隐藏’了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
- 每个组件都有自己的$route属性，里面存储着自己的路由信息。
- 整个应用只有一个router，可以通过组件的$router属性获取到
嵌套路由
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/history',
component:History,
children:[
{
path:'news',//不能写/ 会自动补
component:News
},
{
path:'message',
component:Message
},
]
}
]
});
路由的query参数
1.传递参数
<!-- 跳转路由并携带query参数 to的字符串写法 -->
<router-link :to="`/history/message/detail?id=${m.id}&msg=${m.msg}`" >{{m.msg}}</router-link>
<!-- 跳转路由并携带query参数 to的对象写法 -->
<router-link :to="{
path:'/history/message/detail',
query:{
id:m.id,
msg:m.msg
}
}" >
{{m.msg}}
</router-link>
命名路由
1.给路由命名
{
path:'message',
component:Message,
children:[
{
name:'detail',
path:'detail',
component:Detail
}
]
},
路由的params参数
1.配置路由 声明接收params参数
{
path:'message',
component:Message,
children:[
{
name:'detail',
path:'detail/:id/:msg',//使用占位符声明接收params参数
component:Detail
}
]
}
2.传递参数
<!-- 跳转路由并携带params参数 to的字符串写法 -->
<router-link :to="`/history/message/detail/${m.id}/${m.msg}`" >{{m.msg}}</router-link>
<!-- 跳转路由并携带params参数 to的对象写法 -->
<router-link :to="{
name:'detail', //只能用name 不能用path写法
params:{
id:m.id,
msg:m.msg
}
}" >
{{m.msg}}
</router-link>
路由的props配置
作用：让路由组件更方便的收到参数
props(route){
return{
id:route.query.id,
msg:route.query.msg
}
}
<router-link>replace属性
1.作用：控制路由跳转时操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式push和replace,push是追加历史记录，replace是替换当前记录 路由跳转时候默认为push
3.如何开启replace模式：<router-link replace>Detail</router-link>
编程式路由导航
1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2.具体编码：
//$router的两个API
this.$router.push({
name:'xx',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xx',
params:{
id:xxx,
title:xxx
}
})
缓存路由组件
1.作用：让不展示的路由组件保持挂载，不被销毁。
2.具体编码：
<!-- 缓存一个 -->
<keep-alive include="News">
<!-- 缓存多个 -->
<keep-alive :include="['News','Message']">
两个新的生命周期钩子
1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2.具体名字：
1.activated路由组件被激活时触发。 （类似于小程序的onshow
2.deactivated路由组件失活时触发。 （类似于小程序的hide
路由守卫
1.作用：对路由进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫。
3.全局守卫：
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='atguigu'){//权限控制的具体规则
next()
}
else{
alert('暂无权限查看')
}
}else{
next()
}
})
//全局后置守卫：初始化时执行、每次路由切换前执行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
document.title=to.meta.title||'硅谷系统' //修改网页title
})
4.独享守卫：
beforeEnter(to,from,next){
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='atguigu'){//权限控制的具体规则
next()
}
else{
alert('暂无权限查看')
}
}else{
next()
}
}
5.组件内守卫：
//进入守卫，通过路由规则进入组件（直接安放组件不算）
beforeRouteEnter(to,from,next){
},
//离开守卫，通过路由规则离开组件（通常是进入另一组件
beforeRouteLeave(to,from,next){
}
路由器的两种工作模式
1.对于一个url来说，什么是hash值？——#及其后面的内容就是hash值
2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
3.hash模式：
1.地址中永远带着#号 不美观
2.若以后将地址通过第三方手机app分享，若app校验严格，地址会被标记为不合法
3.兼容性较好
4.history模式：
1.地址干净，美观。
2.兼容性和hash模型相比略差
3.应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题
💭💭💭
记录前端学习中的问题📜
若本文对你有帮助 欢迎点赞收藏👍📑
若有纰漏，敬请包涵，评论区欢迎指正👂
