时间戳

首页 > 解决方案 > VueJS：路由混乱

vue.js - VueJS：路由混乱

问题描述

可能是一个愚蠢的问题，特别是因为我不确定我使用的是 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)
  }

UPDATE App 和 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: () => 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)

})

我还更新了 webpacks

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

标签： vue.jsroutingvuejs2vue-router

解决方案

在您的情况下，App它甚至在路由解析之前静态创建，因此created生命周期挂钩会在路由参数存在之前检查它（即，它将是undefined）。我注意到两者/search并/指向App，但您可能指的是组件名称，例如Search.

您可以动态导入Search：

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

或者您可以使用 VueRouterprops: true自动设置Search'id导航上的道具，避免从created().

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

演示

推荐阅读