正文
vue-router路由嵌套的使用
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
vue-router路由嵌套的使用，以及子路由中设置默认路由：
项目结构：
在/src/App.vue文件中：
<template>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-view/>
</div>
</template> <script>
export default {
name: 'App'
}
</script> <style> </style>
在HellowWorld.vue文件中：
<template>
<div class="hello">
hello
</div>
</template> <script>
export default {
beforeRouteEnter (to, from, next) {
console.log('/ beforeRouteEnter');
next();
},
beforeRouteLeave (to, from, next) {
console.log('/ beforeRouteLeave');
next();
},
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> </style>
在News.vue文件中：
<template>
<div class="news">
<router-link to="/news/cn">国内新闻</router-link>
<router-link to="/news/inter">国际新闻</router-link>
<router-view></router-view>
</div>
</template> <script>
export default { }
</script> <style>
.news{
margin:30px auto;
width:300px;
}
</style>
在Cn.vue文件中：
<template>
<div class="cn">
国内新闻
</div>
</template> <script>
export default { }
</script> <style> </style>
在Inter.vue文件中：
<template>
<div class="inter">
inter国际
</div>
</template> <script>
export default { }
</script> <style> </style>
在/router/index.js文件中，使用路由嵌套：
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: ()=>import(/* webpackChunkName 'home' */'@/components/HelloWorld'),
beforeRouteEnter (to, from, next) {
console.log('router / beforeRouteEnter');
next();
},
beforeRouteLeave (to, from, next) {
console.log('router / beforeRouteLeave');
next();
},
beforeEnter: (to, from, next) => {
console.log('router / beforeEnter');
next();
}
},
{
path: '/news',
name: 'News',
component: ()=>import(/* webpackChunkName 'News' */'@/components/News'),
children:[
{
path:'cn',
name: 'cn',
component: ()=>import(/* webpackChunkName 'cn' */'@/components/Cn'),
},
{
path:'inter',
name: 'inter',
component: ()=>import(/* webpackChunkName 'inter' */'@/components/Inter'),
},
{path: '/news', redirect: 'cn'},
]
}, ]
})
效果如下：
