VueJ : 라우팅 혼선

VueJ : 라우팅 혼선

특히 VueJs와 VueJs 2.0 중 어느 쪽을 사용하는지는 잘 모르겠지만 URL의 파라미터/경로를 선택할 수 있는 간단한 라우팅 작업을 시도하고 있습니다.

예: http://127.0.0.1/search/*****

여기 제 메인입니다.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)
  }

UPDATE App과 검색은 같은 컴포넌트였지만 분할하지 않았습니다(같은 디렉토리).

새로운 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'
    }
  },

당신의 경우,App루트가 해결되기도 전에 스태틱하게 작성되기 때문에created라이프 사이클 훅은 존재하기 전에 루트 파라미터를 체크합니다(즉, 다음과 같습니다).undefined) 둘 다 눈에 띄었다./search그리고./가리키다App단, 다음과 같은 컴포넌트명을 의미합니다.Search.

동적으로 Import할 수 있습니다.Search:

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

또는 VueRouter를 사용하여 자동으로 설정할 수 있습니다.Search의id네비게이션 프로포즈, 루트 파라미터 체크 불필요created().

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

데모

언급URL : https://stackoverflow.com/questions/52709683/vuejs-routing-confusion