Vue router статический параметр

Question

Я хочу передать некоторую информацию через URL в маршрутизаторе vue, например: 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

Наконец я использую строку запроса, чтобы решить мой вопрос.С URL http://localhost/?shopId=123#/products.Я проанализировал строку запроса при запуске приложения и сохранил shopId в глобальном объекте для доступа к последнему.Когда хеш-строка изменилась, строка запроса будет статической.

Answer 2

Вы можете добавить свои параметры пути следующим образом:

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, он будет перенаправлен с использованием идентификатора магазина из вашего магазина, контекста, сеанса, базы данных и т. Д.