vue-router this.$route.params 为空

Question

project_id我正在尝试使用 vue-router 从地址栏调用一个变量。我已经像这样初始化了路由器：

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

Vue.config.productionTip = false
Vue.use(VueRouter)

/* eslint-disable no-new */
const router = new VueRouter({
  routes: [
    { path: '/project/:project_id', component: App }
  ]
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

this.$route.params.project_id并尝试从我的 App.vue 组件内访问：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div id="center_bar">
      oh: {{this.$route.params.project_id}}
    </div>
  </div>
</template>

<script>
import ProjectList from './components/ProjectList'
import ProjectAboutBox from './components/ProjectAboutBox'

export default {
  name: 'App',
  created() {
    console.dir(this.$route.params)
  },
  components: {
    ProjectList,
    ProjectAboutBox
  }
}
</script>

但是，当我写入this.$route.params控制台时，我看到它是一个空对象。

我没有看到任何人遇到过类似的事情，所以我的猜测是我错过了一些非常基本的东西，但我无法弄清楚它到底是什么。

另外，如果我console.dir(this.$route)看到的fullPath是“/”，即使我正在访问http://localhost:8080/project/kljkjkj/

编辑：

我还发现，当我创建一个<router-link>指向我想要解析的地址的地址时，单击它使整个事情正常工作，只需在地址栏中输入地址直接访问它就会失败

Answer 1

我遇到了类似的问题。

当手动输入 url 或刷新浏览器时，$route 对象不会被填充。

经过一番调查，我发现如果匹配了延迟加载路由：

对于“router-view”之外的组件： 即使在“mounted”挂钩中，$route 对象也不会被填充，但会在渲染过程中稍后填充。

对于“router-view”内的组件： $route 对象已填充并立即可用

我的解决方法是在尝试访问 $route 对象内的变量时使用“计算”​​属性而不是“数据”。

版本： “vue”：“^2.6.11”，“vue-router”：“^3.2.0”

节点：将模式从“哈希”更改为“历史”对我来说没有帮助。