如何在Vue-router中使用addroutes方法？

我已經創建了一個函數「addroute（）」來動態添加路由，但它不起作用（路由器沒有改變）。這是使用addRoutes方法的正確方法嗎？我從教程中學到了這一點。如果不是那麼給我一個正確的例子，謝謝！如何在Vue-router中使用addroutes方法？

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


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

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

}); 

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

來源

2017-09-21 Vida Wang

你在尋找setTimeout（）嗎？ – Deepak

您嘗試更改的路由器實例已添加到您擁有的Vue實例。更改該路由器不會更新Vue實例。你想要做的就是調用你添加到Vue實例的路由器實例。一個完整的工作示例可在以下網址找到：Add routes in vue-router

因此，您使用this.$router訪問Vue實例中方法內的路由器。然後使用.addRoutes功能添加要添加的所需路線。

在小提琴中，您可以看到我已經在HTML中添加了ioio鏈接，但它還沒有工作（點擊它將導致<span>Default</span>被添加到<router-view></router-view>）。點擊按鈕時，您正在添加一條新路線。我添加了this.$router.push('/ioio');以在添加路線後強制更新<router-view></router-view>。如果您刪除了這一行代碼，<router-view></router-view>將顯示最後顯示的元素（這在大多數情況下是可取的），再次單擊ioio按鈕將顯示新創建的路線。

希望這會有所幫助！

來源

2017-11-15 08:28:59 IvorG

如何在Vue-router中使用addroutes方法？

回答

相關問題