javascript - How to use addroutes method in Vue-router? - Stack Overflow

admin管理员组

文章数量:1289868

I have created a function "addroute()" to add routes dynamically,but it didn't work(the router does not changed). Is this a right way to use addRoutes method? I have learned this from tutorial. If not then give me a correct example,Thanks!

...
const Bar={
    template:'#panels',
    data(){
        return {title:'badss'}          
    }
        };
const Foo={
    template:"#panels",
        data(){
        return {title:'hell'}
    }
        };


const router = new VueRouter({
  routes:[
      {path:'/foo',ponent:Foo},
      {path:'/bar',ponent:Bar}
  ]
});

new Vue({
    el:'#root',
    router:router,
    data:{
    stats:stats
},
methods: {
    //
},

});

function addroute(){//watch here
    router.addRoutes([{path:'/ioio',ponent:{template:'#panels'}}])
}
setInterval("addroute()", 2000)//watch here
...

I have created a function "addroute()" to add routes dynamically,but it didn't work(the router does not changed). Is this a right way to use addRoutes method? I have learned this from tutorial. If not then give me a correct example,Thanks!

...
const Bar={
    template:'#panels',
    data(){
        return {title:'badss'}          
    }
        };
const Foo={
    template:"#panels",
        data(){
        return {title:'hell'}
    }
        };


const router = new VueRouter({
  routes:[
      {path:'/foo',ponent:Foo},
      {path:'/bar',ponent:Bar}
  ]
});

new Vue({
    el:'#root',
    router:router,
    data:{
    stats:stats
},
methods: {
    //
},

});

function addroute(){//watch here
    router.addRoutes([{path:'/ioio',ponent:{template:'#panels'}}])
}
setInterval("addroute()", 2000)//watch here
...

• javascript
• ecmascript-6
• vue.js
• vue-router

Share Improve this question Follow edited Sep 21, 2017 at 12:13 Jaimesh 85144 gold badges2525 silver badges4141 bronze badges asked Sep 21, 2017 at 10:02 Lauda WangLauda Wang 88733 gold badges1111 silver badges1919 bronze badges 1

• Are you looking for setTimeout()? – Deepak Commented Sep 21, 2017 at 11:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The router instance that you are trying to change is already added to the Vue instance that you have. Changing that router does not update the Vue instance. What you want to do is call the router instance that you have added to the Vue instance. A plete working example can be found at: Add routes in vue-router

So you access the router inside a method in the Vue instance using this.$router. You then add the desired route that you want to add using the .addRoutes functionality.

In the fiddle, you can see that I have added the ioio link in the HTML already, but it does not work yet (clicking it will result in the <span>Default</span> being added to the <router-view></router-view>). When clicking on the button, you are adding a new route. I have added the this.$router.push('/ioio'); to force an update on the <router-view></router-view> after adding the route. If you remove this line of the code, the <router-view></router-view> will display the last shown element (which is desirable in most cases), and clicking on the ioio-button again will show the newly created route.

Hope this helps!

本文标签： javascriptHow to use addroutes method in VuerouterStack Overflow