Vue路由配置项和参数使用及说明
作者：yume_sibai
文章介绍了Vue路由中query和params参数的传递与接收、命名路由简化跳转、props配置参数、router-link的replace属性、编程式导航、路由组件缓存及activated和deactivated两个生命周期钩子的用法
一、路由的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.接收参数
$route.query.id
$route.query.title/* Message.vue */
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带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>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'信息001'},
{id:'002',title:'信息002'},
{id:'003',title:'信息003'}
]
}
},
}
</script>
<style>
</style>/* Detail.vue */
<template>
<ul>
<li>id:{{ $route.query.id }}</li>
<li>title:{{ $route.query.title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail'
}
</script>
<style>
</style>二、命名路由
1.作用：可以简化路由的跳转，即简化路径。
2.如何使用
- 给路由命名
........................
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'detail',
path:'detail',
component:Detail
}
]
}
]
},
]
})- 简化跳转
//简化前
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>
//简化后
<router-link :to="{
name:'detail',
query:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>三、路由的params参数
1.配置路由，声名接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}2.传递参数
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/Detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name:'detail',
params:{
id:m.id,
title:m.title
}
}">{{ m.title }}</router-link>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3.接收参数
$route.params.id
$route.params.title四、路由的props配置
作用：让路由组件更方便的收到参数
{
path:'message',
component:Message,
children:[
{
name:'detail',
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组件
props($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 .............>News</router-link>
六、编程式路由导航
1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活。
2.具体编码
//$router的两个API
this.$router.push({
name:'detail',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'detail',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<router-link :to="`/home/message/Detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'信息001'},
{id:'002',title:'信息002'},
{id:'003',title:'信息003'}
]
}
},
methods: {
pushShow(m){
this.$router.push({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
},
replaceShow(m){
this.$router.replace({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
},
},
}
</script>七、缓存路由组件
1.作用：让步展示的路由组件保持挂载，不被销毁。
2.具体编码：
//include默认包含的所有路由组件都缓存
<keep-alive include="News">
<router-view></router-view>
</keep-alive>八、两个新的生命周期钩子
1.作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态。
2.具体名字
- activated：路由组建被激活时触发
- deactivated路由组件失活时触发
<template>
<ul>
<li :style="{opacity}">欢迎学习Vue</li>
<li>news001 <input type="text"></li>
<li>news002 <input type="text"></li>
<li>news003 <input type="text"></li>
</ul>
</template>
<script>
export default {
name:'News',
data() {
return {
opacity:1
}
},
activated(){
this.timer = setInterval(() => {
console.log('@')
if(this.opacity>=0)
this.opacity -=0.02
else
this.opacity = 1
}, 16);
},
deactivated() {
clearInterval(this.timer)
},
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。