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

在 <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

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 (try to change url to https://p9v3172x6j.codesandbox.io/project/1234)

Answer 3

我遇到了类似的问题。

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

经过一番调查，我发现如果匹配到一条lazy-loading路由：

对于'router-view'之外的组件： $route 对象甚至在 'mounted' 挂钩中也没有被填充，而是在渲染过程中被填充。

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

我的解决方法是在尝试访问 $route 对象中的变量时使用 'computed' 属性而不是 'data'。

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

节点：将模式从 'hash' 更改为 'history' 对我的情况没有帮助。

vue-router this.$route.params 为空

vue-router this.$route.params is empty

vue.js

vue-router