zoukankan      html  css  js  c++  java
  • 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')
  • 相关阅读:
    题目:心灵的抚慰
    间谍网络
    tarjan算法模版
    rect
    学校食堂
    题目:自然的雪糕
    Winform里众多上下文菜单的控制要怎么做?
    ubuntu更新列表
    瞧,Silverlight是如何被部署到客户机的
    盖茨十条成功箴言 值得一生铭记
  • 原文地址:https://www.cnblogs.com/zhangxiaofei/p/6741108.html
Copyright © 2011-2022 走看看