路由
-
相关理解
- vue-router的理解 vue的一个插件库，专门用来实现 SPA应用
-
对SPA的理解
1.单页面的web应用 （single page web application，SPA）
2.整个应用只有一个页面
3.点击页面的导航链接不会刷新页面 只会做页面的局部更新 -
路由的理解
-
什么是路由
1.一个路由就是一组映射关系（key – value）
2.key为路径，value可能是function或component -
路由的分类
1.后端路由：- 理解：value是function 用于处理客户提交的请求
- 工作过程：服务器接收到了一个请求，根据请求路径找到匹配的函数来去处理数据,返回响应式数据
2.前端路由：
- 理解:value是component,用于展示页面的内容
- 工作过程:当浏览器的路径改变时,对应的组件就会显示
路由的基本使用
1.安装 vue-router ,命令 npm i vue-router@3 注意 如果使用vue2 那么要安装router3 vue3安装4
2.应用插件: Vue.use(VueRouter)
3.编写router配置项目
// 引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象 去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
},
]
})
4.实现切换 （active-class可配置高亮的样式）
<router-link active-class="active">About</router-link>
5.指定展示的位置
<router-view></router-view>
路由的注意点
1.路由组件通常放在pages文件夹 ,一般组件通常放在components文件夹
2.通过切换,隐藏了的路由组件 默认是被销毁,需要的时候再去挂载
3.每个组件都有自己的
r
o
u
t
e
属
性
里
面
存
储
自
己
的
路
由
信
息
4.
整
个
应
用
只
有
一
个
‘
r
o
u
t
e
r
‘
,
可
以
通
过
组
件
的
‘
route属性 里面存储自己的路由信息 4.整个应用只有一个`router`,可以通过组件的 `
route属性里面存储自己的路由信息4.整个应用只有一个‘router‘,可以通过组件的‘router` 属性获取到
嵌套路由 多级路由
1.配置路由规则 使用children配置
const router = new VueRouter({
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[
{
path:'xxx'
component:xxx,//此处一定不要写斜杆
},
{
path:'xxx'
component:xxx,
},
]
},
]
})
2.跳转（要写完整路径）
<router-link to='/home/news'></router-link>
路由的query参数
传递参数
//跳转并且携带query参数 to的字符串写法
<router-link to=`/home/messge/detail?id=${item.id}`>{{item.title}}</router-link>
//跳转并且携带query参数 to的对象写法
<router-link :to="{
path:'/home/message/detail',
query:{
id:item.id,
title:item.title
}
}">
跳转
</router-link>
命名路由
1.可以简化路由的跳转
2.如何使用
1.给路由命名
{
path:'/demo',
component:Demo,
children:[
{
path:'news',
component:News
},
{
path:'messge',
component:Messge,
children:[
{
name:'hello' //给路由命名
path:'detail',
component:Detail
}
]
}
]
}
2.简化跳转
简化前
<router-link to=`/home/messge/detail`>{{item.title}}</router-link>
简化后
<router-link :to="{name:'hello'}"></router-link>
路由params参数
1.配置路由，声明接收params参数
{
path:'/home',
component:home,
children:[
{
path:'news',
component:News
},
{
path:'messge',
component:Messge,
children:[
{
name:'hello' //给路由命名
path:'detail/:id/:title',//使用占位符声明接收params参数
component:Detail
}
]
}
]
}
2.传递参数
跳转并且携带params参数,to的字符串写法
<router-link :to='/home/message/detail/666/你好'>跳转</router-link>
跳转并且携带params参数,to的对象写法
跳转
//特别注意 路由携带params参数时 若使用to的对象写法 则不能用path配置项 必须使用name配置项
路由的props配置
作用:让路由组件更方便的接收的收到参数
{
path:'messge',
component:Messge,
name：'hello'，
//第一种写法,props值为对象，该对象中所有的key-value的组合最终都会通过props传给detail组件
//props:{a:900}
//第二种写法，props值为布尔值,布尔值为true,则把路由收到的params参数通过props传给detail组件
//props:true
//第三种写法,props值为函数,该函数返回的对象中每一组key-value都会通过props传给detail组件
//这里注意 如果使用params 那么要记住占位符传参的方式 以及要配合name配置
props(route){ // 自带配置$route回调
return {
id:route.query.id,
title:route.query.title
}
}
}
router-link的replace属性
1.作用：控制路由跳转时操作浏览器历史记录的模式
2.浏览器历史记录的两种写入方式:分别为push 和 replace push是追加历史记录 replace是替换当前记录 路由跳转时候默认为 push
3.如何开启replace模式:<router-link replace …>
编程式路由导航
1.作用：不借助<router-link></router-link>实现路由跳转,让路由跳转更加l灵活
2.具体编码
//$router的两个api
//添加
this.$router.push({
name:'hello'
parmas:{
id:xxx,
title:xxx
}
})
//替换
this.$router.replace({
name: "hello",
params: {
id: item.id,
title: item.title,
},
})
this.$router.forward()//前进
this.$router.back()//后退
this.$router.go()//可前进可后退 看传入的是正数还是负数
缓存路由组件
1.作用:让不展示的路由保持挂载,不被销毁
2.具体编码
<keep-alive include="News"> // 这里的名字是组件name声明的名字
<router-view></router-view>//值得注意的是要缓存的地方 要缓存的是什么组件
</keep-alive>
//如果有多个的时候
<keep-alive :include="['News','Messages']"> // 这里的名字是组件name声明的名字 用v-bind 直接写成数组
<router-view></router-view>//值得注意的是要缓存的地方 要缓存的是什么组件
</keep-alive>
两个新的生命周期钩子 要配合keep-alive使用
1.作用:路由组件所独有的两个钩子,用于捕获路由组件的状态
2.具体名字
- actviated 路由组件被激活时触发
- deactivated 路由组件失活时触发
路由守卫
1.作用：对路由进行权限的控制
2.分类：全局守卫，独享守卫，组件内守卫
3.全局守卫
//全局前置路由守卫:初始化时执行,每次路由切换前执行
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('token')){ //权限控制的具体规则
next()//放行
}else{
alert('没有权限')
}
}else{
next()
}
})
//全局后置守卫,初始化时执行,每次路由切换后执行
router.afterEach((to,from)=>{
if(to.meta.isAuth){
document.title = to.meta.title // 修改网页的title
}else{
document.title = '默认'
}
})
//独享守卫 在路由配置里面直接配置
beforeEnter(to,from.next){
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('token')){ //权限控制的具体规则
next()//放行
}else{
alert('没有权限')
}
}else{
next()
}
}
组件内守卫
//进入守卫,通过路由规则，进入该组件时被调用
beforeRouteEnter（to，from,next）{
},
//离开守卫,通过路由规则,离开组件时被调用
beforeRouteLeave(to,from,next){
}
路由器的两种工作模式
1.对于一个url来说 什么是哈希值？—#及后面的内容就是哈希值
2.hash值不包含在HTTP请求中,即,哈希值不会给服务器
3.哈希||hash模式
-
地址中永远带着#号,不美观 -
若以后将地址通过第三方手机APP分享,若app校验严格,则地址会被标记不合法 -
兼容性比较好
4.history模式
-
地址干净,美观 -
兼容性和hash模式相比略差 -
应用部署上线时需要后端人员支持,解决页面刷新404的问题
{
},
//离开守卫,通过路由规则,离开组件时被调用
beforeRouteLeave(to,from,next){
}
#### 路由器的两种工作模式
1.对于一个url来说 什么是哈希值？---#及后面的内容就是哈希值
2.hash值不包含在HTTP请求中,即,哈希值不会给服务器
3.哈希||hash模式
1. 地址中永远带着#号,不美观
2. 若以后将地址通过第三方手机APP分享,若app校验严格,则地址会被标记不合法
3. 兼容性比较好
4.history模式
1. 地址干净,美观
2. 兼容性和hash模式相比略差
3. 应用部署上线时需要后端人员支持,解决页面刷新404的问题
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
