第五章Vue路由
文章目录
- 相关理解
-
-
- vue-router的理解
- 对SPA应用的理解
- 路由的理解
-
- 基本路由
-
- 几个注意点
- 嵌套路由——多级路由
- 路由query参数
- 命名路由
- 路由的params参数
- 路由的props配置
- 路由跳转的replace方法
- 编程式路由导航
- 缓存路由组件
- 路由组件独有的生命钩子
-
- activated和deactivated
- 路由守卫
-
- 全局路由守卫
- 独享路由守卫
- 组件内路由守卫
- 路由器的两种工作模式
相关理解
vue-router的理解
- vue 的一个插件库，专门用来实现SPA 应用
对SPA应用的理解
- 单页 Web 应用（single page web application，SPA）
- 整个应用只有一个完整的页面
- 点击页面中的
导航链接不会刷新页面，只会做页面的局部更新 - 数据需要通过ajax请求获取
路由的理解
什么是路由?
-
一个路由就是一组映射关系（key - value）
-
key 为路径，value 可能是 function 或 componen
路由分类
后端路由：
-
理解：value 是 function，用于处理客户端提交的请求
-
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由：
- 理解：value 是 component，用于展示页面内容
- 工作过程：当浏览器的路径改变时，对应的组件就会显示
基本路由
下载vue-router：npm i vue-router
About.vue
我是About组件的内容
Home.vue
我是Home组件的内容
src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
el:"#app",
render: h => h(App),
router
})
App.vue
Vue Router Demo
About
Home
总结：
-
安装vue-router，命令：npm i vue-router
-
应用插件：Vue.use(VueRouter)
编写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
}
]
})
export default router
- 首先引入对应的组件，然后配置路由的key:value格式的数据
- //暴露router export default router
实现切换（active-class可配置高亮样式）：
About
指定展示位：
几个注意点
- 路由组件通常存放在
pages文件夹，一般组件通常存放在components文件夹 - 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
- 每个组件都有自己的
$route属性，里面存储着自己的路由信息 - 整个应用只有一个router，可以通过组件的
$router属性获取到
嵌套路由——多级路由
home.vue
Home组件内容
About.vue
我是About组件的内容
News.vue
- news001
- news002
- news003
router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message
}
]
}
]
})
总结：
配置多级路由规则，使用children配置项：
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写：/news
component:News
},
{
path:'message', //此处一定不要写：/message
component:Message
}
]
}
]
- 是在哪个路由组件中，就去对应的router中配置children的子级路由
跳转（要写完整路径）：
路由query参数
将数据写入queryString中来进行数据传递
Messgae.vue
-
{{m.title}}
Detail.vue
- 消息编号：{{$route.query.id}}
- 消息标题：{{$route.query.title}}
router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail
}
]
}
]
}
]
})
总结：
传递参数
- to的字符串写法，我们需要给to加上：，因为是为了让其识别query参数，所以要将其识别为js语法，而不是字符串,为了能使用模板${},所以字符串内写成
"``"
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
{{m.title}}
</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}">跳转</router-link>
- 如果比较复杂，就写成对象模式，不负责就写成字符串形式
接收参数：
- $route.query.id
- $route.query.title
命名路由
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
//name配置项为路由命名
name:'xiangqing',
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail
}
]
}
]
}
]
})
使用路由名进行跳转
-
{{m.title}}
总结：
命名路由：
- 作用：可以简化路由的跳转
如何使用：
- 给路由命名 在路由配置中，给对应的路由配置name属性
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
简化跳转：
- 我们在跳转的时候可以使用path方式，也可以使用name方式
- 如果是使用对象形式实现name跳转，在对象中就可以配置name属性
- 如果使用字符串使用name方式，实现字符串的对象形式实现
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
跳转</router-link>
路由的params参数
将数据写在url中，来进行数据传递
Message.vue
-
{{m.title}}
Detail.vue
- 消息编号：{{$route.params.id}}
- 消息标题：{{$route.params.title}}
router/idnex.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title',//使用占位符声明接收params参数
component:Detail
}
]
}
]
}
]
})
总结
- 我们在路由配置中使用占位符声明接收的params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}
- 跳转路由时候，需要带着对应的params数据
- 字符串形式
- 对象形式
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
- 使用数据使用$route.params.属性名
$route.params.id
$route.params.title
路由的props配置
我们去取params的数据或者是query数据，都需要通过this.route.params或者是this.route.query，如果都写在组件中，就会显示的很长，所以我们可以通过props来进行简化，将对应的数据直接转换成我们的props中的数据
Message.vue
-
{{m.title}}
index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title',
component:Detail,
//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
// props:{a:1,b:'hello'}
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
// props:true
//props的第三种写法，值为函数
props($route){
return {
id:$route.params.id,
title:$route.params.title,
}
}
}
]
}
]
}
]
})
Detail.vue
- 消息编号：{{id}}
- 消息标题：{{title}}
总结：
- 作用：让路由组件更方便的收到参数
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
- 三种写法
- 第一种比较死板，是写死在我们的路由配置中，不管怎么跳转都有这个数据
- 第二种只能用于params方式传值转换为我们的props
- 第三种比较灵活这种方式就将组件中的业务逻辑转移到配置中，组件就专注页面，不会那么复杂
路由跳转的replace方法
Home组件内容
总结：
- 作用：控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式
- 每进一个路由，就会往栈中进入一个路由记录，如果是push状态，就是一直往栈顶进入一个新的路由记录
- 如果是replace模式，那么每进一个路由，就把栈顶的路由记录进行替换
- 开启replace模式：
News
编程式路由导航
我们有时候的进行路由跳转可能是通过点击按钮来进行路由跳转，所以就用不了我们的
Banner.vue
Vue Router Demo
Message.vue
-
{{m.title}}
总结：
- 作用：不借助
具体编码：
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退
缓存路由组件
我们知道从一个路由切换到另一个路由，会导致前一个路由页面销毁，但是有时候我们在这个被销毁的页面填写的数据，我们不希望数据消失，这时候就需要缓存路由了
News.vue
- news001
- news002
- news003
Home.vue
Home组件内容
总结：
- 作用：让不展示的路由组件保持挂载，不被销毁
具体编码：
//缓存一个路由组件
<keep-alive include="News"> //include中写想要缓存的组件名，不写表示全部缓存
<router-view></router-view>
</keep-alive>
//缓存多个路由组件
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
- include里面写的组件名，也就是我们组件中name属性
路由组件独有的生命钩子
activated和deactivated
- 欢迎学习vue
- news001
- news002
- news003
总结：
activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态- 具体使用：
activated路由组件被激活时触发deactivated路由组件失活时触发
如果我们对路由页面不进行缓存，那么我们离开这个页面就会触发这个组件的销毁，进入时触发组件的创建，但是我们如果对路由页面进行缓存，那么我们离开的时候并不会导致组件的销毁，但是有些东西我们希望离开页面就不需要运行了，比如某些定时器，所以我们的可以使用
activated和deactivated
路由守卫
全局路由守卫
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyv',
path:'/about',
component:About,
meta:{title:'关于'}
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'}
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{isAuth:true,title:'消息'},
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{isAuth:true,title:'详情'},
props($route){
return {
id:$route.query.id,
title:$route.query.title,
}
}
}
]
}
]
}
]
})
//全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {
console.log('前置路由守卫',to,from)
//to.meta.isAuth如果为true，说明我们这个页面需要进行权限验证
if(to.meta.isAuth){
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
//导出路由器
export default router
- meta是我们路由提供给我们程序员来写一些元数据的地方
- next表示放行，也就是进行了路由页面跳转
- to表示当前去哪个页面
- from表示当前来自于哪个页面
独享路由守卫
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyv',
path:'/about',
component:About,
meta:{title:'关于'}
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[
{
name:'xinwen',
path:'news',
component:News,
meta:{title:'新闻'},
//独享守卫，特定路由切换之后被调用
beforeEnter(to,from,next){
console.log('独享路由守卫',to,from)
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{title:'消息'},
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{title:'详情'},
props($route){
return {
id:$route.query.id,
title:$route.query.title,
}
}
}
]
}
]
}
]
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
//导出路由器
export default router
组件内路由守卫
我是About组件的内容
总结：
- 作用：对路由进行权限控制
- 分类：全局守卫、独享守卫、组件内守卫
全局守卫：
//全局前置守卫：初始化时执行、每次路由切换前执行
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)
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'vue_test'
}
})
独享守卫：
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}
组件内守卫：
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {...},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {...},
路由器的两种工作模式
对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值
- hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器
hash模式：
-
地址中永远带着#号，不美观
-
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
-
兼容性较好
history模式：
- 地址干净，美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题