vue-router this.$route.params 为空

Question

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

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/>'
})

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

<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对象不会被填充。

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

对于“路由器视图”之外的组件： $route 对象即使在 'mounted' 钩子中也不会被填充，而是在渲染过程的后期填充。

对于“路由器视图”内的组件： $route 对象已填充并立即可用

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

版本： "vue": "^2.6.11", "vue-router": "^3.2.0"

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

Answer 2

默认的 vue-router 是hash mode。您可以尝试访问http://localhost:8080/#/project/kljkjkj/

你可以切换到历史模式

const router = new VueRouter({
  mode: 'history',
  routes: [{ path: "/project/:project_id", component: App }]
});

演示：https://codesandbox.io/s/p9v3172x6j（尝试将 url 更改为https://p9v3172x6j.codesandbox.io/project/1234）

Answer 3

当在<template>时，您不需要参考this。

你试过了吗：

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

?

另外，我发现您没有使用<router-view>：

https://router.vuejs.org/api/#router-view