Question

我想通过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'})将获得URL http://localhost/center/SHOPID/products，其中SHOPID始终是静态的。

Answer 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，来自商店，上下文，会话，数据库等的商店ID重新路由。

Answer 2

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

Vue路由器静态参数

2 个答案: