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>我想要解析的地址的<router-link> ，然后單擊它會使整個事情正常工作，只是通過在地址欄中鍵入地址來直接訪問它會失敗

Answer 1

默認 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 2

我遇到了類似的問題。

手動輸入 url 或刷新瀏覽器時，不會填充 $route 對象。

經過一番調查，我發現如果匹配了一條延遲加載路由：

對於 'router-view' 之外的組件：即使在 'mounted' 鈎子中也不會填充 $route 對象，而是在渲染過程的后期填充。

對於 'router-view' 內的組件： $route 對象已填充並立即可用

我的解決方法是在嘗試訪問 $route 對象內的變量時使用“計算”​​屬性而不是“數據”。

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

節點：將模式從“哈希”更改為“歷史”對我來說沒有幫助。

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