Vue路由器静态参数答案

【问题标题】：Vue router static paramVue路由器静态参数
【发布时间】：2018-09-06 08:50:59
【问题描述】：

我想通过vue路由器中的url传递一些信息，例如 http://localhost/center/SHOPID/products http://localhost/center/SHOPID/categories http://localhost/center/SHOPID/... SHOPID 在整个 SPA 实例生命周期内不会改变，但是不同的 SPA 实例可能有不同的 SHOPID，因为我不能将 SHOPID 存储在 localStorage 中以避免 SPA 实例相互影响。如何在我的代码中使 SHOPID 透明。比如vm.$router.push({name:'center.product'})会得到urlhttp://localhost/center/SHOPID/products，其中SHOPID总是静态的。

【问题讨论】：

你试过推送路由路径而不是路由名称吗？
@StevenSpungin 如果我推送路由路径，我需要先生成路径，这种情况下我必须得到 SHOPID 并处理它。
你可以简单地使用router.vuejs.org/api/#base
@soju 如果 SHOPID 不同，则基本 url 应该不同。
我没有看到问题，你应该相应地创建你的路由器实例

标签： vue.js vuejs2 vue-router

【解决方案1】：

您可以像这样添加路径参数：

router.push({ name: 'center.product', params: { SHOPID: theShopId }})

或者您可以使用字符串替换文本推送路径。

router.push({ path: `center/${theShopId}/products` })

这假设您使用参数定义了路径。

center/:SHOPID/products

您还可以设置导航守卫，并重定向到不同的路线，从会话中添加您的 SHOPID

  routes: [
    {
      path: 'center/products',
      component: Products,
      beforeEnter: (to, from, next) => {
        next({ name: 'center.product', params: { SHOPID: $store.state.shopId }})
      }

或使用查询代替路径参数

  routes: [
    {
      path: 'center/products',
      component: Products,
      beforeEnter: (to, from, next) => {
        next({ name: 'center.product', query: { shopId: $store.state.shopId }})
      }

当您推送 center/products 时，它将使用您的商店、上下文、会话、数据库等中的商店 ID 重新路由。

【讨论】：

所以如果我需要改变路线，我需要到处处理SHOPID？或者您是否有其他解决方案可以使 url 中的字符串静态化，例如查询字符串？
我用一个使用导航守卫填写 shopID 的间接方式更新了答案。
使用导航守卫是个好主意。我将尝试使用全局导航守卫来处理带有 SHOPID 的所有路由。谢谢！
我无法更改 beforeEach 守卫中的参数。
我发现刷新窗口时很难保留shopId。除非手动解析路线，否则当警卫第一次触发时我无法获得 shopId。所以我使用了查询字符串。很容易被query-string模块解析，路由改变时不会改变。

【解决方案2】：

最后我使用查询字符串来解决我的问题。带有网址http://localhost/?shopId=123#/products。我在应用程序启动时解析查询字符串并将 shopId 存储在全局对象中以访问后者。当哈希字符串改变时，查询字符串将是静态的。

【讨论】：