Fe-interview: [vue] 怎样动态加载路由?

Created on 20 Jun 2019  ·  4Comments  ·  Source: haizlin/fe-interview

[vue] 怎样动态加载路由?

vue

Most helpful comment

<div id="first">
    <router-link to="/a">老八一号</router-link>
    <router-link to="/b">老八二号</router-link>
    <router-link to="/c">老八三号</router-link>
    <router-link to="/d">老八四号</router-link>
    <router-view></router-view>
</div>
<script>
    let a={
        template:`<h1>奥里给 干了 兄弟们</h1>`
    };
    let b={
        template:`<h2>虽然不是同一个时间,但是是同一个撤所儿</h2>`
    };
    let c={
        template:`<h3>就吃老八秘制晓汉堡儿</h3>`
    };
    let d={
        template:`<h2>老八秘制晓汉堡  既便宜它还管饱</h2>`
    };

    let routerObj=new VueRouter({
        routes:[
            {path:'/a',component:a,name:'一号'},
            {path:'/b',component:b,name:'二号'}
        ]
    });
    routerObj.addRoutes([
        {path:'/c',component:c,name:'三号'},
        {path:'/d',component:d,name:'四号'}
    ]);
    let vm=new Vue({
        el:"#first",
        data:{},
        router:routerObj
    })
</script>

vue-router的addRoutes方法

All 4 comments

router.addRoutes

image

<div id="first">
    <router-link to="/a">老八一号</router-link>
    <router-link to="/b">老八二号</router-link>
    <router-link to="/c">老八三号</router-link>
    <router-link to="/d">老八四号</router-link>
    <router-view></router-view>
</div>
<script>
    let a={
        template:`<h1>奥里给 干了 兄弟们</h1>`
    };
    let b={
        template:`<h2>虽然不是同一个时间,但是是同一个撤所儿</h2>`
    };
    let c={
        template:`<h3>就吃老八秘制晓汉堡儿</h3>`
    };
    let d={
        template:`<h2>老八秘制晓汉堡  既便宜它还管饱</h2>`
    };

    let routerObj=new VueRouter({
        routes:[
            {path:'/a',component:a,name:'一号'},
            {path:'/b',component:b,name:'二号'}
        ]
    });
    routerObj.addRoutes([
        {path:'/c',component:c,name:'三号'},
        {path:'/d',component:d,name:'四号'}
    ]);
    let vm=new Vue({
        el:"#first",
        data:{},
        router:routerObj
    })
</script>

vue-router的addRoutes方法

router.addRoutes

Was this page helpful?
0 / 5 - 0 ratings