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')
  • 相关阅读:
    vue 加载更多2
    vue 加载更多
    js获取浏览器信息
    iscroll
    git fetch
    input file accept类型
    git从安装到使用
    sass中的循环判断条件语句
    animation
    vue2+animate.css
  • 原文地址:https://www.cnblogs.com/zhangxiaofei/p/6741108.html
Copyright © 2011-2022 走看看