vue2-路由
路由
概念
vue-router
vue的插件库,专门用来实现SPA应用
SPA
- 单页Web应用
- 整个应用只有一个完整的页面
- 点击页面的导航链接不会刷新页面,只会做页面的局部刷新
- 数据需要通过Ajax请求获取
路由概念
一个路由就是一组映射关系,key为路径,value可能是function或component
路由分类
-
后端路由
- 理解:value是function,用于处理客户端提交的请求
- 工作过程:服务器收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
-
前端路由
- 理解:value是component,用于展示页面内容
- 工作过程:当浏览器的路径改变时,对应的组件就会显示
基本路由
1.安装vue-router
2.应用插件
3.编写router配置项
import VueRouter form 'vue-router'
const router = new VueRouter({
routes:[
{
path:'/...',
component:??
},
...
]
});
export default router
4.实现切换(active-class可配置激活后样式)
<router-link active-class="active" to="/...">???<router-link>
5.指定展示位置
<router-view><router-view>
注:
路由组件通常放在pages文件夹,一般组件通常存放在components文件夹
通过切换,隐藏了的路由组件,默认是被销毁的,需要的时候再进行挂载
每个组件都有自己的$route属性,存储自身的路由信息
整个应用只有一个router,通过$router属性获取
嵌套(多级)路由
1.配置路由规则,使用children配置项
import VueRouter form 'vue-router'
const router = new VueRouter({
routes:[
{
path:'/?',
component:?,
children:[
{
path:'??',
component:??
}
]
},
...
]
});
export default router
2.调整(需写完整路径)
<router-link active-class="active" to="/?/??">??<router-link>
路由传参
query参数
1.传递参数
<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link active-class="active" :to="/.../...?p=...&q=...&...">??<router-link>
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link active-class="active" :to="{
path:'/.../...'
query:{
p:...,
q:...,
...
}
}">
??
<router-link>
2.接收参数
$route.query.p
$route.query.q
...
params参数
1.配置路由,声明接收params参数
import VueRouter form 'vue-router'
export default new VueRouter({
routes:[
{
path:'/?',
component:?,
children:[
{
path:'??',
component:??,
children:[
name:'--',
path:'???/:p/:q',
component:???
]
}
]
},
...
]
});
2.传递参数
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link active-class="active" :to="/.../.../p/q">??<router-link>
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link active-class="active" :to="{
name:'--'
params:{
p:...,
q:...,
...
}
}">
??
<router-link>
注:路由携带params参数时,若使用to的对象写法,择不能使用path配置项,必须使用name配置项
2.接收参数
$route.params.p
$route.params.q
...
命名路由
简化路由的跳转
1.给路由命名
import VueRouter form 'vue-router'
export default new VueRouter({
routes:[
{
path:'/?',
component:?,
children:[
{
name:'--'
path:'??',
component:??
}
]
},
...
]
});
2.简化跳转
<!-- 简化前,需写完整路径 -->
<router-link active-class="active" :to="/.../...?p=...&q=...&...">??<router-link>
<!-- 简化后,通过名字跳转 -->
<router-link active-class="active" :to="{
name:'--'
query:{
p:...,
q:...,
...
}
}">
??
<router-link>
路由的props配置
让路由组件更方便地接收到参数
{
name:'--',
path:'??/:p/:q',
component:??,
<!-- 第一种,props为对象,该对象中所有的key-value最终通过props传给对应组件 -->
props:{p:...,q:...}
<!-- 第二种,props为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给对应组件 -->
props:true
<!-- 第三种,props为函数,该函数返回的对象中每一组key-value最终通过props传给对应组件 -->
props(route){
return{
p:...,
q:...
}
}
}
router-link的replace属性
- 作用:控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式:
- push 追加历史记录(路由跳转默认push)
- replace 替换当前记录
- 开启replace模式:<router-link replace …></router-link>
编程式路由导航
1.作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活
2.具体编码
this.$router.push({
name:'--',
params:{
p:...,
q:...
}
})
this.$router.replace({
name:'--',
params:{
p:...,
q:...
}
})
this.$router.forward()//前进
this.$router.back()//后退
this.$router.go(n)//n为正数,前进n步,n为负数,后退n步
缓存路由组件
- 作用:让不展示的路由保持挂载,不被销毁
- 具体编码
<!-- 缓存一个 -->
<keep-alive include="组件名">
<router-view><router-view>
</keep-alive>
<!-- 缓存多个 -->
<keep-alive :include="['组件名1','组件名2',...]">
<router-view><router-view>
</keep-alive>
路由组件独有的两个新的生命周期钩子
- 作用:路由组件独有的两个钩子,用于捕获路由组件的激活状态
- 具体名称
- actived 路由组件被激活时触发
- deactivated 路由组件失活时触发
路由守卫
- 作用:对路由进行权限控制
- 分类:全局守卫、独享守卫、组件内守卫
全局守卫
1.全局前置守卫:初始化时执行,每次路由切换前执行
router.beforeEach((to, form, next)=>{
if(to.meta.isAuth){//判断当前路由是否参与权限控制
if('权限控制规则'){
next();//放行
}
}else{
next();//放行
}
})
2.全局后置守卫:初始化时执行,每次路由切换后执行
router.beforeEach((to, form)=>{
if(to.meta.title){//判断当前路由是否参与权限控制
doucument.title = to.meta.title
}else{
doucument.title = '--'
}
})
独享守卫
只有前置守卫,没有后置守卫,可与全局后置守卫组合使用
beforeEnter((to, form, next)=>{
if(to.meta.isAuth){//判断当前路由是否参与权限控制
if('权限控制规则'){
next();//放行
}
}else{
next();//放行
}
})
组件内守卫
- 进入守卫,通过路由规则,进入该组件时调用 beforeRouteEnter(to, from, next){}
- 离开守卫,通过路由规则,离开该组件时调用 beforeRouteLeave(to, from, next){}
路由器的两种工作模式
对一个url来说,#后的内容是hash值
hash值不会包含在HTTP请求中,即hash值不会带给服务器
hash模式
- 地址中带#号,不美观
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
- 兼容性较好
history模式
- 地址干净、美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持,解决刷新页面服务器404的问题
更多前端学习笔记