Vue(十三) 路由、路由嵌套、query、param传参、propos、replace属性。编程式路由导航，特有的生命周期函数，路由守卫

文章目录

路由
- 1. 基本使用
- 2. 多级(嵌套)路由
- 3. 路由query传参
- 4. 命名路由
- 5. 路由param传参
- 6. propos属性
- 7. replace属性
- 8. 编程式路由导航
- 9. 缓存路由组件
- 10. actived，deactived生命周期函数
- 11. 路由守卫
- - 1、全局路由
  - 2、独享路由
  - 3、组件内路由守卫
- 12. 路由器工作的两种模式

路由

路由就是一组key-value的对应关系
- 前端路由： key是路径，value是组件component，用于展示页面内容
- 后端路由： key是路径，value是函数。后端根据请求路径找到匹配的函数，处理请求。
多个路由，需要经过路由器的管理。路由主要应用于SPA(Single page web application)应用

1. 基本使用

1、安装路由
vue2：npm i vue-router@3
vue3: npm i vue-router@4

2、编写路由器文件：src/router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// About和Home都是路由组件，所以放在文件src/pages下，一般组件则放在src/components里
import About from '../pages/About'
import Home from '../pages/Home'// 创建并暴露一个路由器
export default new VueRouter({routes: [{path: '/about',component: About},{path: '/home',component: Home}]
})

main.js

import VueRouter from 'vue-router'
import router from './router/index'
Vue.use(VueRouter)
new Vue({// 将App组件放入容器中render: h => h(App),// 添加router配置项router,
}).$mount('#app') // 挂载容器

3、实现切换(active-class可配置高亮)
router-link标签实现路由组件的切换，to=...表示要切换的路径，根据路径对应到上边js文件中的路由组件。router-link本质上是a标签。

<router-link class="list-group-item" to="./home" active-class="active">Home</router-link><router-link class="list-group-item" to="./about" active-class="active" >About</router-link

4、指定路由组件展示的位置

 <router-view></router-view>

router-link选择要展示哪个路由组件，将路由组件展示在router-view指定的位置中
在这里插入图片描述
注意：

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个路由组件都有自己的$route属性，里面存储着自己的路由信息。（非路由组件也有$route属性，其显示的是当前路由组件的一些信息。比如非路由组件Banner）

整个应用只有一个router(即About的router和Home的router是一回事)，可以通过组件$router属性获取到。

// 代码验证
// About组件
mounted () {console.log('About路由组件挂载');window.aboutRoute = this.$routewindow.aboutRouter = this.$router
},
// Home组件
mounted () {console.log('Home路由组件挂载');window.aboutRoute = this.$routewindow.aboutRouter = this.$router
},

在这里插入图片描述

项目中有多个router-link与router-view时，点击链接，到底跳转到哪一个router-view显示：
参考博客：Vue中router-link与router-view的对应关系和映射特点

2. 多级(嵌套)路由

要实现的效果：
在这里插入图片描述
Home组件里多了两个组件：News和Message

routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写：/newscomponent:News},{path:'message',//此处一定不要写：/messagecomponent:Message}]}
]

跳转路径：

<router-link to="/home/news">News</router-link>

由于子级路由在Home组件里，所以Home组件里有两个<router-link>,分别是News和Message。且Home组件里有一个<router-view>用来展示路由组件News或Message的内容。
图中的消息1，消息2是点击Message展示的消息。所以消息1，消息2是Message组件里的内容

<!--Home.vue文件-->
<template><div><router-link to="/home/news" active-class="active">News</router-link><router-link to="/home/message" active-class="active">Message</router-link><!-- 展示组件内容的位置 --> <router-view></router-view> </div>
</template>
<!--Message.vue文件-->
<template><div><ul><li><a href="/message1">message001</a>&nbsp;&nbsp;</li><li><a href="/message2">message002</a>&nbsp;&nbsp;</li><li><a href="/message/3">message003</a>&nbsp;&nbsp;</li></ul></div>
</template>

3. 路由query传参

实现效果：
在这里插入图片描述
Message组件里嵌套Detail组件，点击不同的消息时，将参数传递给Detail组件，Detail组件展示内容。
传递参数：

<!--Message.vue组件-->
<ul><li v-for="m in message" :key="m.id"><!-- 跳转路由并携带参数，to的字符串写法 --><router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> <!-- 跳转路由并携带参数，to的对象写法 --><router-link:to="{path: '/home/message/detail',query: {id: m.id,title: m.title,}}">{{ m.title }}</router-link></li>
</ul><div><!-- Deatil组件展示在这儿 --><router-view></router-view></div>

接收数据

<!--Detail.vue组件--><li>消息编号:{{ $route.query.id }}</li><li>消息标题：{{ $route.query.title }}</li>

4. 命名路由

1、作用：跳转时简化编码，否则嵌套路由多了，路径很长
2、给路由命名

// 给谁起名字，就要把name写在谁的配置项里 routes: [{path: '/home',component: Home,children: [{path: 'message', component: Message,children: [{ name: 'xiangqing', path: 'detail', component: Detail }]}]}]

3、简化跳转

<!--简化前--><router-link to="/home/message/detail">跳转</router-link> 
<!--简化后-->
<router-link :to="{name:'xiangqing'}">跳转</router-link> 
<!--简化后携带参数-->
<router-link:to="{name: 'xiangqing',query: {...},}"
>跳转</router-link>

5. 路由param传参

1、配置占位符，声明接收param参数

 {path: 'message', component: Message,children: [// 配置占位符;占位的时候用的title，id；用params取参数的时候就能用title，id{ name: 'xiangqing', path: 'detail/:id/:title', component: Detail }]}

2、传递参数

<!-- 跳转路由并携带参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">跳转</router-link>
<!-- 跳转路由并携带参数，to的对象写法 -->
<router-link:to="{name: 'xiangqing',params: {id: m.id,title: m.title,},}"
>跳转</router-link>

注：使用to的对象写法时，传参用params时，只能用name；而不能用path指定路径

3、接收参数

 $route.params.id$route.params.title

6. propos属性

组件中每次读取路由参数时，都是 $route.params...
propos属性的作用是少写重复项，让路由组件更方便的接收到参数。
接收参数的组件设置propos属性

{name:'xiangqing',path:'detail/:id/:title',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// 缺点：传递的是死数据// props: { a: 1, b: 'hello' }//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件,通过propos接收参数时，不需要占位符了props($route){return {id:$route.query.id,title:$route.query.title}}
}

Detail组件接收参数

<li>消息编号:{{ id }}</li>
<li>消息标题：{{ title }}</li> 
...
props: ['id', 'title']

7. replace属性

作用：路由跳转时操作浏览器历史记录的模式
浏览器历史记录有两种写入方式：分别为push：追加历史记录，replace：替换当前记录。路由跳转时默认为push
开启replace模式:<router-link replace...>News</router-link>

8. 编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
实现路由条件，可以采用$router下的几个API

//$router的两个主要API
this.$router.push({name: 'xiangqing',query: {id: m.id,title: m.title}
})this.$router.replace({name: 'xiangqing',query: {id: m.id,title: m.title}
})
// 类似于历史记录的前进后退
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

比如：
在这里插入图片描述
历史记录默认记录方式为push，所以依次点击：
About -> Home -> News -> Message -> 消息1的push查看 -> 消息2的replace查看 -> 消息3的replace查看

历史记录存储的是：
在这里插入图片描述
前进后退和go都是根据这个历史记录的顺序来进行跳转。比如点后退，则页面变成/home/messages页面

9. 缓存路由组件

作用：<keep-alive> 标签让不展示的路由组件保持挂载、不被销毁，标签里的include属性可用来指定缓存哪个路由组件
语法：

<!-- 如果不指定，则在这里展示的路由组件都被缓存 -->
<keep-alive>  <router-view></router-view>
</keep-alive>
<!-- 缓存多个 -->
<keep-alive :include="['News', 'Message']"><router-view></router-view>
</keep-alive> 
<!-- 缓存一个 -->
<keep-alive include="News"><router-view></router-view>
</keep-alive>

当缓存News组件时，由News组件切换到Message组件。News组件不会被销毁。

//这个函数不执行则证明不会被销毁
beforeDestroy () {alert('News组件即将被销毁');
}

注意点:
（1） include里写的是组件名，即创建组件时定义的name属性
在这里插入图片描述
（2）注意</keep-alive>要加在哪里
想要缓存News组件，则应该加载News路由组件展示的区域

10. actived，deactived生命周期函数

这两个是路由组件独有的生命周期钩子，用于捕获路由组件的激活状态

actived：路由组件被激活时触发。
deactived：路由组件失活时触发。

比如News组件里的某句话加一个透明度样式设置，采用定时器，透明度不断发生变化。当切换为其他组件时，透明度不再变化，切换回来时，透明度继续发生变化。

如果采用之前的mounted和beforeDestroy函数

<li :style="{ opacity }">透明度变化</li>
<script>
data () {return {opacity: 1}},mounted () {this.timer = setInterval(() => {console.log('@');this.opacity -= 0.01if (this.opacity <= 0) {this.opacity = 1}}, 16)},beforeDestroy () {clearInterval(this.timer)},
</script>

但是当News组件设置了缓存，即使切换为别的组件，News组件也不会被销毁，所以计时器仍旧在运行，透明度仍旧在变化。

这种情况下采用actived和deactived十分合适。

activated () {this.timer = setInterval(() => {console.log('@');this.opacity -= 0.01if (this.opacity <= 0) {this.opacity = 1}}, 16)},deactivated () {clearInterval(this.timer)},

11. 路由守卫

路由器文件router/index.js：

const router = new VueRouter({routes: [{name: 'guanyu',path: '/about',component: About,meta: { isAuth: false, title: '关于' }},{name: 'zhuye',path: '/home',component: Home,meta: { isAuth: false, title: '主页' },children: [{ name: 'xinwen', path: 'news', component: News, meta: { isAuth: true, title: '新闻' }, },{name: 'xiaoxi', path: 'message', component: Message, meta: { isAuth: true, title: '消息' },}]}]
})

给每个路由的meta配置项存放了key-value键值对；

1、全局路由

beforeEach()每次路由切换之前都会调用这个函数，函数里进行一些逻辑处理，判断是否可以跳转之类的
afterEach():每次路由切换之后被调用，可用来修改标签页的标题。
meta，在这个属性里配置isAuth,方便判断是否要对该路由进行权限控制

// 全局前置路由守卫--初始化的时候被调用，每次路由切换之前被调用
router.beforeEach((to, from, next) => {console.log('全局前置路由守卫',to, from);    if (to.meta.isAuth) {if (localStorage.getItem('school') === 'atguigu') {next() //放行，若不调用这个函数，则不进行路由切换} else {alert('学校名不对，无权限查看');}} else {next()}
})
// 全局后置路由守卫--初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to, from) => {console.log('全局后置路由守卫');console.log(to, from);document.title = to.meta.title || '硅谷系统' 
})

在这里插入图片描述

2、独享路由

beforeEnter()：给某一个路由单独配置

{name: 'xinwen', path: 'news', component: News, meta: { isAuth: true, title: '新闻' },beforeEnter (to, from, next) {if (to.meta.isAuth) {if (localStorage.getItem('school') === 'atguigu') {next()} else {alert('学校名不对，无权限查看');}} else {next()}},
},

3、组件内路由守卫

全局和独享路由守卫都是在路由配置文件里写，组件内路由守卫是在对应的组件内写

// About.vue
//进入守卫：通过路由规则，进入该组件之前被调用
beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter');console.log(to, from);next()
},
//进入守卫：通过路由规则，离开该组件时之前beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave');console.log(to, from);next()
}

注意是通过路由规则进入该组件时，这两个函数才会被调用
不通过路由规则进入该组件的情况，比如：作为一般组件直接被调用
在这里插入图片描述

12. 路由器工作的两种模式

1、hash模式
hash值：对于一个url来说，路径中#后边的内容统称为hash值。hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

在这里插入图片描述
hash模式

地址中永远带着#号
兼容性较好
刷新页面时，hash值不会包含在请求里，所以刷新页面发送请求不会出错。但若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

2、history模式

地址中没有#号
兼容性略差
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。（刷新页面时，整个url都会发给服务器会报404错误）

3、设置模式

//index.js，默认是hash模式
const router = new VueRouter({mode: 'history',...
})

拓展：
项目打包：npm run build
打包就是将vue文件转为基本的css，js，html等浏览器认识的文件。