vue-router 嵌套路由
值得注意的是这里link标签中to属性的绑定,不能直接写我们定义时写的路径,因为子组件的路径会自动拼接父组件前边的路径,所以我们可以通过name进行绑定,或者可以通过写出完整路径进行绑定。在我们进行嵌套的路由里边,使用router-view添加路由,然后通过router-link进行绑定跳转的子路由。2.确定好之后,找到对应路由的文件,在指定的位置写入router-view标签。4.在其中添加ch
·
一、子路由的创建
1.我们使用嵌套路由之前一定要确定在哪个路由下进行嵌套
2.确定好之后,找到对应路由的文件,在指定的位置写入router-view标签
3.去router文件夹下找到index.js文件,在定义组件中找到我们想进行嵌套的路由
4.在其中添加children属性,绑定的是数组,数组里边定义新的子路由
如以下代码,就定义了path为/list的路由的子路由
import Vue from 'vue';
import VueRouter from 'vue-router';
import Mylist from '../views/Mylist.vue';
import RouterIndex from '../views/RouterIndex.vue';
import Notfound from "../views/Notfound.vue";
import Left from '../views/Listchildone.vue';
import Right from '../views/Listchildtwo.vue';
Vue.use(VueRouter)
const routes = [
{
path:'/',
component:RouterIndex
},
{
path:'/list',
name:'list',
component:Mylist,
children:[
{
path:'childone',
name:'left',
component:Left
}
,{
path:'childtwo',
name:'right',
component:Right
},
]
},
{
path:'*',
component:Notfound
}
]
const router = new VueRouter({
routes
})
export default router;
二、嵌套路由的使用
在我们进行嵌套的路由里边,使用router-view添加路由,然后通过router-link进行绑定跳转的子路由
<template>
<div>
<aside>
<ul class="font">
<li><router-link :to="{name:'left'}">1孩子</router-link></li>
<li><router-link :to="{name:'right'}">2孩子</router-link></li>
</ul></aside>
<main><router-view></router-view></main>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
三、嵌套路由的路径
值得注意的是上边link标签中to属性的绑定,不能直接写我们定义时写的路径,因为子组件的路径会自动拼接父组件前边的路径,所以我们可以通过name进行绑定,或者可以通过写出完整路径进行绑定,
但是如果父组件的路径path是'/'的话,我们直接就可以用子组件的path进行绑定
即我在"/"的path路径下的路由下定义子路由,如下边代码
import Vue from 'vue';
import VueRouter from 'vue-router';
import Mylist from '../views/Mylist.vue';
import RouterIndex from '../views/RouterIndex.vue';
import Notfound from "../views/Notfound.vue";
import Left from '../views/Listchildone.vue';
import Right from '../views/Listchildtwo.vue';
Vue.use(VueRouter)
const routes = [
{
path:'/',
component:RouterIndex,
children:[
{
path:'childone',
name:'left',
component:Left
}
,{
path:'childtwo',
name:'right',
component:Right
},
]
},
{
path:'/list',
name:'list',
component:Mylist,
},
{
path:'*',
component:Notfound
}
]
const router = new VueRouter({
routes
})
export default router;
这样我们就在path为"/"下的路由嵌套了子路由,子路由跳转就可以直接用其路径匹配了
<router-link to='childone'></router-link>
<router-link to='childtwo'></router-link>
更多推荐
已为社区贡献4条内容
所有评论(0)