Vue路由及嵌套路由

router.js

    import Vue from 'vue'
            import VueRouter from 'vue-router'

            Vue.use(VueRouter)

            const first = {
                template: '<h1>first</h1>'
            }
            const second = {
                template: '<h1>second</h1>'
            }
            const home = {
                template: '<h1>home</h1>'
            }
            const lala = {
                template: `
                <div class="lala">
                <h2>组件</h2>
                <router-view class="lalala"></router-view>
                </div>
                `
            }
            const firstfirst = {
                template: '<h1>firstfirst</h1>'
            }
            const secondsecond = {
                template: '<h1>secondsecon</h1>'
            }

            const router = new VueRouter({
                mode: 'history',
                base: __dirname,
                routes: [{
                    path: '/',
                    component: home
                }, {
                    path: '/first',
                    component: lala,
                    children: [{
                        path: '/first',
                        component: firstfirst
                    }, {
                        path: '/second',
                        component: secondsecond
                    }]
                }, {
                    path: '/second',
                    component: second
                }]
            })
            new Vue({
                router,
                template: ` <div id="r">    
                <h1>导航</h1>
                <ol>
                <li><router-link to = "/">/</router-link></li>
                <li><router-link to = "/first">first</router-link></li>
                <ol>
                <li><router-link to = "/first">first</router-link></li>
                <li><router-link to = "/second">second</router-link></li>
                </ol>
                <li><router-link to = "/second">second</router-link></li>
                </ol>
                <router-view>    </router-view>    
                </div> 
                `
            }).$mount('#app')

 

转载于:https://www.cnblogs.com/zhangxiaofei/p/6741108.html