<router-view :key="$route.fullPath"></router-view> routes: [
{
path:‘/nav‘,
name:‘nav‘,
component:Nav,
//路由嵌套增加此属性
children:[
//在这里配置嵌套的子路由
]
}
]
<!DOCTYPE html>
<html>
<head>
<title>路由的跳转</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入路由插件 -->
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Nav={
template:`
<div>
<router-view></router-view>
<router-link :to="{name:‘nav.index‘}">首页</router-link>
|
<router-link :to="{name:‘nav.pensonal‘}">个人中心</router-link>
|
<router-link :to="{name:‘nav.message‘}">资讯</router-link>
|
<router-link :to="{name:‘nav.mine‘}">我的</router-link>
</div>
`,
}
var Index={
template:`
<div>首页</div>
`,
}
var Pensonal={
template:`
<div>个人中心</div>
`,
}
var Message={
template:`
<div>资讯</div>
`,
}
var Mine={
template:`
<div>我的</div>
`,
}
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{
path:‘‘,
redirect:‘/nav‘
},
{
path:‘/nav‘,
name:‘nav‘,
component:Nav,
//嵌套路由增加这个属性
children:[
//配置我们的嵌套路由
{path:‘‘,redirect:‘/nav/index‘},
{path:‘index‘,name:‘nav.index‘,component:Index},
{path:‘pensonal‘,name:‘nav.pensonal‘,component:Pensonal},
{path:‘message‘,name:‘nav.message‘,component:Message},
{path:‘mine‘,name:‘nav.mine‘,component:Mine},
]
}
]
})
new Vue({
el:‘#app‘,
router,
template:`
<div>
<router-view></router-view>
</div>
`,
data(){
return {}
},
methods:{
}
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/xl4ng/p/12584481.html