作用:能保存组件原来的数据!!!(注意:时同一个父路由路径下切换才行)
在其父组件中使用 标签,include的值为组件名!!!
<ul>
<li>
<router-link active-class="active" to="/home/message">message</router-link>
</li>
<li>
<router-link active-class="active" to='/home/news'>news</router-link>
</li>
</ul>
<!-- include的值为组件名!!! -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
缓存多个组件路由
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
代码演示:
<template>
<div class="Home">
<h1>Home</h1>
<ul>
<li>
<router-link active-class="active" to="/home/message">message</router-link>
</li>
<li>
<router-link active-class="active" to='/home/news'>news</router-link>
</li>
</ul>
<!-- include的值为组件名!!! -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name:'Home',
data(){
return{
}
},
methods:{
}
}
</script>
<style scoped>
.Home{
background-color: aqua;
}
</style>
路由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:[
{
name:'guanyu',
path:'/about',
component:About,
children:[
{
// 二级路由路径不能加/
path:'message',
component:Message,
children:[
{
name:'xiangqing',
// path:'detail/:id/:title',
path:'detail',
component:Detail,
// props的第一种写法,值为对象,
// 该对象中的所有key-value都会以props的形式传给Detail组件
// props:{a:1,b:'hello'}
// props的第二种写法,值为布尔值,若该布尔值为真
// 就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
// props:true
// props的第三种写法,值为函数
props($route){
return {id:$route.query.id,title:$route.query.title}
}
}
]
}
]
},
{
path:'/home',
component:Home,
children:[
{
// 二级路由路径不能加/
path:'news',
component:News
},
{
// 二级路由路径不能加/
path:'message',
component:Message,
children:[
{
name:'xiangqing',
// path:'detail/:id/:title',
path:'detail',
component:Detail,
// props的第一种写法,值为对象,
// 该对象中的所有key-value都会以props的形式传给Detail组件
// props:{a:1,b:'hello'}
// props的第二种写法,值为布尔值,若该布尔值为真
// 就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
// props:true
// props的第三种写法,值为函数
props($route){
return {id:$route.query.id,title:$route.query.title}
}
}
]
}
]
}
]
})
结果: