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

默认的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（尝试将网址更改为https://p9v3172x6j.codesandbox.io/project/1234）

Answer 2

我遇到了类似的问题。

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

经过一番调查，我发现是否符合延迟加载路线：

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

对于“路由器视图”内部的组件： $ 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

vue-router this。$ route.params为空

3 个答案: