vue-router
介绍
1.1vue-router的理解
vue的一个插件库,专门来实现SPA应用
1.2对SPA的理解
1.单页web应用
2.整个应用只有一个页面
3.点击页面中的导航链接不会刷新页面,只会做页面的局部更新
4.数据需要通过ajax请求
1.3路由的理解
1.什么是路由
1.一个路由就是一组映射关系(key-value)
2.key为路径,value可能是function或component
2.路由的分类
1.后端的路由
1.理解:value是一个function,用于处理客户端提交的请求
2.工作过程:服务器收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
2.前端路由:
1.理解:value是一个compontent,用于展示页面内容。
2.工作过程:当浏览器的路径改变时候,对应组件就会显示
1.基本使用
1.安装vue-router
npm i vue-router 安装低版本的npm i vue-router@3.2.0 3
2.应用插件
Vue.use(VueRouter)
3.编写router配置项
//引入VueRouter
import VueRouter from 'vue-router'
//引入组件
import About from '@/compontents/About'
import Home from '../compontents/Home.vue'
// 创建一个路由器并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/Home',
component:Home
}
]
})
4.实现切换
<router-link active-class="active" to="/about">About</router-link>
5.指定展示的位置
<router-view></router-view>
2.几个注意点
1.路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹
2.通过切换,“隐藏”了的路由组件,默认是被销毁的,需要的时候再去挂载
3.每个组件都有自己的$router属性,里面存储着自己的路由信息
4.整个应用只有一个router,可以通过$router属性获取到
3.多级路由
1.配置路由规则,使用children
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'message', //此处一定不要写:/message
component:Message,
},
{
path:'new', //此处一定不要写:/news
component:New,
}
]
}
]
2.跳转(要写完整路径)
<router-link to="/home/message">message</router-link>
4.路由传递query参数
1.传递参数
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<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:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
2.接收参数
$router.query.id
$router.query.title
5.命名路由
1.作用:可以简化路由的跳转
2.如何使用
1.给路由命名
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
name:'hello', //给路由命名
path:'welcome',
component:Hello
]
}
]
}
2.简化跳转
<!-- 简化前,需要写完整的路径 -->
<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>
6.路由的params参数
1.配置路由,声明接收params参数
routes:[
{
name:'guanyu', //路由命名
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'message',
component:Message,
children:[
{
name:'xiangqing', //路由命名
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
},
{
path:'new',
component:New,
}
]
}
]
2.传递参数
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
<!-- 跳转路由并携带params参数,to的对象写法 -->
<router-link
:to="{
// path:'/home/message/detail', //params不能利用path跳转
name:'xiangqing', //利用name跳转
params:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
3.接收参数
$route.params.id
$route.params.title
7.路由组件的props配置
作用让路由组件更方便的收到参数
{
name:'xiangqing', //路由命名
path:'detail/:id/:title',
component:Detail,
// props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给detail组件
props:{a:1,b:2},
// props的第二种写法, 值为布尔值,若布尔值为真,就会把该路由组件受到的所有params参数。以props的形式detail组件
props:true
// props的第三种写法,值为函数
props($route){
return {id:$route.params.id,title:$route.params.title}
}
// 利用解构赋值 连续解构赋值
props({params:{id,title}}){
return {id,title}
}
}
8.的replace属性
1.作用:控制路由跳转时浏览器的记录模式
2.浏览器的历史记录有两种写入方式:分别为push和replace ,push 是追加历史记录,replace是替换当前记录。路由跳转时默认为push
3.如何开启replace模式:<router-link replace ..... ..>News</router-link>
9.编程式路由导航
//$router的两个API
this.$router.push({
name:'xiangqing', //利用name跳转
params:{
id:m.id,
title:m.title
}
})
replaceShow(m){
this.$router.replace({
name:'xiangqing', //利用name跳转
params:{
id:m.id,
title:m.title
}
})
}
this.$router.back() //控制路由的前进
this.$router.forward() //控制路由的后退
this.$router.go(x) //可前进也可后退 x为正 前进x步 x为负 后退x步
10.缓存路由组件
1.作用:让展示的路由组件保持挂载,不被销毁
具体编码
<!-- 让组件切换时候不被销毁 include指定不被销毁的组件-->
<keep-alive include="New">
<router-view></router-view>
</keep-alive>
<!-- 多个 -->
<keep-alive :include="['News,Message']">
<router-view></router-view>
</keep-alive>
11.两个声明周期钩子
1.作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
2.具体的名字
1.activated路由组件被激活时触发
2.deactivated路由组件失活时触发
12.路由守卫
1.作用:对路由进行权限控制
2.分类:全局守卫、独享守卫、组件内守卫
3.全局守卫:
// 全局前置路由守卫 ---初始化或者每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
// 通过路由校验
// if(to.path === '/home/new' || to.path ==='/home/message' ){
// 通过路由属性校验
if(to.meta.isAuth ){
if(localStorage.getItem('school')==='xinghuo1'){
next()
}else{
console.log("认证失败");
}
}else{
next()
}
})
// 后置路由守卫 ---初始化或者每次路由切换之后被调用
router.afterEach( (to,from) => {
if(to.meta.title){
doucument.title = to.meta.title //修改网页title
}else{
doucument.title = 'vue-test'
}
})
4.独享路由守卫
写在路由中的属性
beforeEnter:(to,from,next)=>{
if (localStorage.getItem('school')==='xinghuo') {
next()
}else{
console.log("权限不够");
}
}
5.组件内守卫
// 通过路由规则,进入组件时候被调用
beforeRouteEnter (to, from, next) {
}
},
// 通过路由规则,离开组件时被调用
beforeRouteLeave (to, from, next) {
}
13.路由工作的两种工作模式
1.对于一个url来说,什么是hash值?——#及其后面的内容就是hash值。
2.hash值不会也含在HTTP请求中,即: hash值不会带给服务器。
3. hash模式:
1.地址中永远带着#号,不美观。
⒉若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
3.兼容性较好。
4.history模式:
1.地址干净,美观。
2.兼容性和hash模式相比略差。
3.应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
解决history模式下404问题
npm install --save connect-history-api-fallback
在app.use(express.static(__dirname+'/static/dist')) 之前
引入 var history = require('connect-history-api-fallback');
使用 app.use(history())