Vue学习简记（十三）路由2--多级路由及相关参数和配置
Vue学习简记（十三）
-
- 路由
-
- 3.多级路由（多级路由）
- 4.路由的query参数
- 5.命名路由
- 6.路由的params参数
- 7.路由的props配置
- 8.```< router-link>```的replace属性
- 9.编程式路由导航
- 10.缓存路由组件
- 11.两个新的生命周期钩子
路由
3.多级路由（多级路由）
-
配置路由规则，使用children配置项：
routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写：/news component:News }, { path:'message',//此处一定不要写：/message component:Message } ] } ] -
跳转（要写完整路径）：
<router-link to="/home/news">Newsrouter-link>
4.路由的query参数
-
传递参数
<router-link :to="/home/message/detail?id=666&title=你好">跳转router-link> <router-link :to="{ path:'/home/message/detail', query:{ id:666, title:'你好' } }" >跳转router-link> -
接收参数：
$route.query.id $route.query.title
5.命名路由
-
作用：可以简化路由的跳转。
-
如何使用
-
给路由命名：
{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ] } -
简化跳转：
<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参数
-
配置路由，声明接收params参数
{ path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail } ] } ] } -
传递参数
<router-link :to="/home/message/detail/666/你好">跳转router-link> <router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }" >跳转router-link>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
-
接收参数：
$route.params.id $route.params.title
7.路由的props配置
作用：让路由组件更方便的收到参数
{
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
}
}
}
8.< router-link>的replace属性
- 作用：控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式：分别为
push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push - 如何开启
replace模式：News
9.编程式路由导航
-
作用：不借助
-
具体编码：
//$router的两个API 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() //可前进也可后退
10.缓存路由组件
-
作用：让不展示的路由组件保持挂载，不被销毁。
-
具体编码：
<keep-alive include="News"> <router-view>router-view> keep-alive>
11.两个新的生命周期钩子
- 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
- 具体名字：
activated路由组件被激活时触发。deactivated路由组件失活时触发。
图示例子：
router/index.js
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
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: 'detail',
path: 'detail/:id/:title',
component: Detail,
props(route) {
return {
id: route.params.id,
title: route.params.title
}
}
}]
},
]
},
]
})
App.vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
<button @click="back">后退</button>
<button @click="forward">前进</button>
<button @click="test">测试一下go</button>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods:{
back(){
this.$router.back()
console.log('回退了一步')
},
forward(){
this.$router.forward()
console.log('前进了一步')
},
test(){
this.$router.go(2)
console.log('前进了两步')
}
}
}
</script>
pages/About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About',
}
</script>
pages/Detail.vue
<template>
<ul>
<li>消息编号：{{id}}</li>
<li>消息标题：{{title}}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
props:['id','title'],
mounted() {
console.log(this.$route)
},
}
</script>
pages/Home.vue
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<!-- 缓存多个路由组件 -->
<!-- <keep-alive :include="['News','Message']"> -->
<!-- 缓存一个路由组件 -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
export default {
name:'Home',
}
</script>
pages/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> -->
<!-- //声明接收params参数 -->
<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>
<!-- 跳转路由并携带query参数，to的对象写法 -->
<!-- <router-link :to="{
name:'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'}
]
}
},
methods: {
pushShow(m){
console.log('调用了pushShow')
this.$router.push({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
},
replaceShow(m){
console.log('调用了replaceShow')
this.$router.replace({
name:'detail',
params:{
id:m.id,
title:m.title
}
})
}
},
}
</script>
pages/News.vue
<template>
<ul>
<li :style="{opacity}">我是测试路由中钩子的例子</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
}
},
beforeDestroy() {
console.log('News组件即将被销毁了')
},
activated() {
console.log('News组件被激活了')
this.timer = setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
deactivated() {
console.log('News组件失活了')
clearInterval(this.timer)
},
}
</script>