VueJS：路由混乱

Posted 2023-02-22

【中文标题】VueJS：路由混乱

【英文标题】：VueJS : Routing confusion

【发布时间】：2019-03-13 13:29:51

【问题描述】：

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

)

我也更新了 webpacks

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

【参考方案1】：

在您的情况下，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,
  
]

demo

【讨论】：

我试过了，看到更新的答案，遗憾的是它甚至没有加载搜索组件

见demo。您可以更新小提琴以重现该问题吗？

你先生是史诗般的伙伴！

@Burf2000 没问题 :)