Vue роутер не навигация - PullRequest
       7

Vue роутер не навигация

0 голосов
/ 10 октября 2018

У меня проблемы с навигацией VueRouter.В моем приложении некоторые страницы работают нормально, и с идентичным кодом, на других страницах маршрутизация не работает / страница не обновляет навигацию.

Есть ли ошибки с маршрутизатором?Как вы не можете вызвать маршрутизатор из компонентов или ...?

именованный маршрут в моем приложении

export default new VueRouter({
  routes: [
    {
      path: '/grams/one/:cname',
      component: GramsOne,
      name: "gramsOne"
    },
  ...

Затем внутри компонента на странице:

<q-btn v-for='(rel, key) in gram.relatedItems' :key='key'
  color='secondary'
  @click="goGram(rel)"
  >
  {{rel.cn}}
</q-btn>


// later in the script:

  methods: {
    goGram(gram) {
      let newRoute = {
        name: 'gramsOne',
        params: {cname: gram.cname}
      }
      console.log('goGram', newRoute)
      this.$router.push(newRoute)
    }
  },

В другом месте на той же странице работают простые маршруты.URL-адрес будет обновлен в браузере.Я вижу правый консольный журнал с информацией о маршруте

Но страница / содержимое не изменится.

После обновления строки URL я могу нажать ctrl-R и новая страница получитзагружен.Таким образом, маршрут назначения работает нормально.

На других страницах того же приложения я могу использовать тот же маршрут для определения цели и загрузки.

Это также загружается с тем же URL ипросто другой параметр запроса, который вызывает проблему.

/ app / items / foo / app / items / bar

, где bar - это тип некоторого свойства /app/items/:foo

Я пробовал различные комбинации именованныхмаршруты, маршруты, использующие и т. д., и не могут видеть шаблон.

"vue": "~2.5.0",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0"

Спасибо за любые подсказки!

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Компонент в этом случае тот же, поэтому vue будет повторно использовать экземпляр.this.$route в компоненте изменится, но хуки created(), beforeMounted() и mounted() не будут вызываться.
В этом месте, вероятно, вы используете this.$route.params.cname

для принудительного вызовадля создания нового экземпляра компонента вы можете установить уникальный ключ, например <router-view :key="$route.fullPath">

Другой вариант - реагировать на изменения в $route с помощью наблюдателя:

watch: {
  "$route.params.cname": {
    handler(cname) {
      // do stuff
    },
    immediate: true
  }
}
0 голосов
/ 10 октября 2018

Маршрутизатор можно вызывать внутри компонента просто отлично.Фактически вы обычно вызываете роутер из компонента.

Из предоставленных фрагментов кода в одной точке кода, которую вы используете cn, а затем в другой точке вы используете cname.Это может быть проблемой, почему это никогда не работает для вас.

Я создаю codesandbox , чтобы воссоздать ваш сценарий, и, кроме упомянутого выше незначительного наименования, вещи вроде бы работают просто отлично.

...