【VUE前进之路】你一定能搞懂Vue的路由
作者简介：一名前端萌新，前来进行VUE的前进之路
个人主页：大熊李子的主页
1.什么是vue-router
vue的一个插件库，专[门用来实现SPA应用
2.什么是SPA应用
单页Web应用(single page web application, SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面，只会做页面的局部更新。数据需要通过ajax请求获取。
3.什么是路由
3.1后端路由
①理解: value 杲function,用于处理客户端提交的请求。
②工作过程: 服务器接收到一个请求时,根据请求路径找到匹配的函数来处
理请求,返回响应数据。
3.2前端路由
1)理解: value是component,用于展示页面内容。←
2)工作过程: 当浏览器的路径改变时,对应的组件就会显示。←
4.路由的基本使用
1.安装vue-router,命令npm i vue- router
2.应用插件: Vue.use(VueRouter)
3.编写router配置项
// 引入vueRouter
import vueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'
export default new vueRouter({
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home
},
]
})
4.使用router-link实现切换
<div class="list-group">
<router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>
<router-link class="list-group-item" active-class="active" to="/home">Homerouter-link>
div>
5.使用router-view实现组件的呈现
<div class="panel-body">
<router-view>
router-view>
div>
注：
1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2.通过切换，“隐藏” 了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
4.整个应用只有一个$router, 可以通过组件的$router属性获取到。
4.1多级路由
在配置路由规则的以及路由里面进行配置下一级路由使用children
routes: [{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [{
path: 'news',
component: News
},
{
path: 'message',
component: Message
}
]
},
]
跳转注意to里面要写对
<router-link
class="list-group-item "
active-class = 'active'
to="/home/message">Message
</router-link>
4.2路由命名
4.3params路由传参
4.3-1配置路由声明接受params参数
children:[
{
name:'xiangqing',
path:'detail/:id/:title',// 使用占位符声明接收参数
component:Detail,
}
]
4.3-2传递参数
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}router-link>
<router-link
:to="{
// 简化路径代码
name:'xiangqing',// 必须使用name，不能使用path
// params:所携带的参数
params:{
id:m.id,
title:m.title,
}
}"
>{{m.title}}router-link>
4.3-3接受参数
<div>
<ul>
<li>消息：{{$route.params.id}}li>
<li>编号：{{$route.params.title}}li>
ul>
div>
4.4路由的props配置
让路由组件更方便的接受到参数
children: [{
name: 'xiangqing',
// path: 'detail/:id/:title', // 使用占位符声明接收参数
path: 'detail', // query不使用占位符声明接收参数
component: Detail,
props($route) {// 使用解构赋值连续写法简化代码
return {id:$route.query.id,title:$route.query.title}
}
4.5的replace属性
1.作用: 控制路由跳转时操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式：分别为push和replace，push 是追加历史记录，replace 是替换当前记录。路由跳转时候,默认为push
3.如何开启replace模式：
5.编程式路由导航
1.作用：不借助实现路由跳转，让路由跳转更加灵活
methods: {
//后退
back() {
this.$router.back();
},
//前进
forward() {
this.$router.forward();
},
//可以后退也可以前进
test() {
this.$router.go(-2);
}
}
5.1缓存路由组件
1.作用: 让不展示的路由组件保持挂载,不被销毁。
<keep-alivel include= "News">
K router-view>
keep-alive>
5.2路由守卫
1.作用：对路由进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫
1. 全局守卫
router.beforeEach((to, from, next) => {
console.log(to, from);
if (to.meta.isAuth) {//判断是否需要鉴权
if (localStorage.getItem('school') === 'shanyu') {
next();
} else {
alert('该学校无权限查看此内容')
}
} else {
next()
}
})
// 后置路由守卫，切换路由后调用
router.afterEach((to, from) => {
console.log(to, from);
document.title = to.meta.title || '山鱼屋'
})
2. 独享路由守卫使用方法
某一个路由内独自享用的这么一个守卫
beforeEnter: (to, from, next) => {
console.log(to, from);
if (to.meta.isAuth) { //判断是否需要鉴权
if (localStorage.getItem('school') === 'shanyu') {
next();
} else {
alert('该学校无权限查看此内容')
}
} else {
next()
}
},
3. 组件内守卫使用方法
组件内守卫:
//进入守卫:通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫:通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
4. 路由器的两种工作模式
- hash模式①地址中永远带着#号，不美观。②若以后将地址通过第三方手机app分享，若app校验严格, 则地址会被标记为不合法。③兼容性较好。
- history模式1.地址干净，美观。2. 兼容性和hash模式相比略差。3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
5. 两个新的生命周期钩子
1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2.具体名字: activated 路由组件被激活时触发。 deactivated 路由组件失活时触发。
文末总结
本篇文章主要介绍了vue中的路由的使用，并且将路由拆分成几个模块，来细致的区分开来，并且能够很好的将路由介绍清楚，也能使阅读体验增加，好啦本文就到这里啦！