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

Posted 2023-02-22

【中文标题】如何在 Vue-router 中使用 addroutes 方法？

【英文标题】：How to use addroutes method in Vue-router?

【发布时间】：2018-03-02 15:13:09

【问题描述】：

我创建了一个函数“addroute()”来动态添加路由，但它不起作用（路由器没有改变）。 这是使用 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
...

【问题讨论】：

你在寻找 setTimeout() 吗？

【参考方案1】：

您尝试更改的路由器实例已添加到您拥有的 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 按钮将显示新创建的路线。

希望这会有所帮助！

【讨论】：

嘿 Ivor，我使用过这种方法，但似乎无法重新加载页面并让组件保持不变，对此有什么想法吗？

这在很大程度上取决于您添加附加路线的方式。我怀疑您从服务器检索路由。如果此人已获得对这条新路线的访问权限，您可能应该更改他们在该级别的访问权限，并确保在重新加载时，他们最初获得该路线。但是，如果这是一个依赖于状态的临时链接（或者您正在离线 Web 应用程序中工作），如果您想保留路由，则必须从 localStorage 或 IndexedDb 保存和检索路由。如果您使用的是 Vuex，则有一些选项可以将其保存到 localStorage。

我现在的做法是说当加载 about 组件时，向路由器添加一个新路由，然后转到那个新路由，从 about => 导航就可以了，但是在页面刷新时，它消失了，我确实尝试将它存储在本地存储中，但我丢失了对它无法解析的对象的上下文的引用。

检查这个小提琴：jsfiddle.net/ivor/ptxa3cLf。添加路由时，它还会将路由推送到 routes 变量并将其放入本地存储中。由于 localstorage 不适用于对象，因此您需要在写入时进行字符串化，并在检索时对其进行解析。如果您有任何问题，请告诉我！