vue的子路由

为什么80%的码农都做不了架构师？>>>   

###vue路由

要了解vue的子路由,首先得理解路由,vue的路由是vue的一个官方组件,只需要在main.js里面配置好

这个是router.js文件
import Vue from 'vue'
//导入
import Router from 'vue-router'
定义一个路由,用这种require的方式,可以异步加载
//const searchIndex = r => require.ensure([], () => r(require('@/components/search/index')), 'searchIndex')

const searchRouter = [{
    path: '/search/index',
    meta: { title: '搜索' },
    component: searchIndex
}];

//这个是main.js文件
import router from './router'
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})

最后在app.vue里面

<template>
    <router-view></router-view>
</template>

就可以使用路由访问刚才定义好的searIndex了,路径就是xxx#search/index很简单

###子路由

子路由是什么呢,子路由就是在一个路由里面,嵌入了另外一个vue组件,而且通过子路由的方式来嵌入,直接上代码

首先我们有一个路由是这样的

const test = r => require.ensure([], () => r(require('@/components/test/index')), 'test')

const testRouter = [{
    path: '/test',
    meta: { title: '测试' },
    component: test
}];

test/index.vue 很简单里面什么都没有

<template>
    <div>
        我是父路由
    </div>
</template>

<script>

export default {
    data: function() {
        return {
           
        }
    },
    mounted() {
      
    },
    methods: {}
}
</script>
<style>
 
</style>

那么这个时候怎么设置这个子路由呢,首先我们在路由的文件改一下

route/index.js

const testDetail = r => require.ensure([], () => r(require('@/components/test/detail')), 'testDetail')

const testRouter = [{
    path: '/test',
    meta: { title: '测试' },
    component: test,
    children: [{
        path: 'testDetail', //订单详情页
        component: testDetail,
    }, ]
}];

添加一个文件test/detail.vue

<template>
    <div>
    我是子路由
    </div>
</template>

<script>
export default {
    data: function() {
        return {

        }
    },
    mounted() {

    },
    methods: {}
}
</script>

再在父vue里面改一下

<template>
    <div>
        我是父路由
    //加上这段
    <router-view></router-view>
    </div>
</template>

<script>

export default {
    data: function() {
        return {
           
        }
    },
    mounted() {
      
    },
    methods: {}
}
</script>
<style>
 
</style>

那么接下来我们访问test/detail路由的时候,就会发现父路由和子路由的内容一起显示出来了

其实我们可以看回去app.vue,会发现,其实我们整个项目都是跑在了app.vue这个大的路由下面的一个一个的子路由

###作用

这个子路由.看起来和组件的十分相似,就是在一个文件里面可以嵌套一个可以复用的组件,但是又有不一样,就是这个是以路由的方式去访问的,这样在url上面就会有一个跳转,也就是可以用a标签去访问,不过具体的使用还得接下来去研究

转载于:https://my.oschina.net/gcdong/blog/1094032