VueJS: путаница маршрутизации - PullRequest
Новая
       19

VueJS: путаница маршрутизации

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

возможно, глупый вопрос, тем более что я не уверен, что использую VueJS или VueJS 2.0, но я пытаюсь заставить работать простую маршрутизацию, где я могу подобрать параметры / путь URL.

Например http://127.0.0.1/search/*****

Вот мой main.js 

import Vue from 'vue'
import App from './components/App'
import VueRouter from 'vue-router'

const routes = [
  { path: '/', name: 'Home', component: App },
  { path: 'search/:id', name: 'Search', component: App }
];


const router = new VueRouter({ mode: 'history', routes: routes });
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)

})

И на моем App.component я пытаюсь получить: id 

created: function() {
    //this.filterTutorials();

    this.searchTerm = this.$route.query.id;

    if (this.searchTerm == null) {
      this.searchTerm = this.$route.params.id;
    }

    console.log(this.searchTerm)
  }

ОБНОВЛЕНИЕ Приложение и поиск были одним и тем же компонентом, но я не разделил их (один и тот же каталог)

Новый main.js.Это даже не вызов страницы поиска 

import Vue from 'vue'
import App from './components/App'
import VueRouter from 'vue-router'

const routes = [
  { path: '/', name: 'Home', component: App },
  { path: '/search/:id', name: 'Search', component: () => import(/* webpackChunkName: "search" */ './components/Search.vue'), props: true }
];


const router = new VueRouter({ mode: 'history', routes: routes });
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)

})

Я также обновил веб-пакеты 

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },

1 Ответ

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

В вашем случае App создается статически еще до того, как маршрут даже разрешается, поэтому хук жизненного цикла created будет проверять параметр маршрута еще до его появления (т. Е. Он будет undefined).Я заметил, что /search и / указывают на App, но вы, вероятно, имели в виду имя компонента, например Search.

. Вы можете динамически импортировать Search: 

const routes = [
  {
    path: '/search/:id',
    name: 'Search',
    component: () => import(/* webpackChunkName: "search" */ './views/Search.vue')
  }
]

Или вы можете использовать VueRouter props: true для автоматической установки Search id реквизита при навигации, убрав проверку параметров маршрута из created(). 

const routes = [
  {
    path: '/search/:id',
    name: 'Search',
    component: () => import(/* webpackChunkName: "search" */ './views/Search.vue'),
    props: true,
  }
]

демо

...