在 Vuejs 中刷新页面后，Prop 未传递给路由器组件

Question

我最近遇到了 Vue router 的问题，假设我们有一个 Vue CLI 项目，我们的 App 组件如下所示：

<template>
  <div id="app">
    <div class="links">
      <router-link to="one">one</router-link>
      <router-link to="two">two</router-link>
    </div>
    <div class="routers">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data: function(){
    return{

    }
  },
  created(){
    this.$router.push({
      name: 'two',
      params:{
        message: 'hello'
      }
    });
  }
}
</script>

我们的第一和第二部分是：

<template>
    <div>
        two, the message is {{ message }}
    </div>
</template>

<script>
export default {
    props:[
        "message"
    ]
}
</script>

和

<template>
    <div>
        one
    </div>
</template>

我们的路由器文件是：

import Vue from 'vue'
import VueRouter from 'vue-router'
import one from '../components/one.vue'
import two from '../components/two.vue'

Vue.use(VueRouter);

export const router = new VueRouter({
    routes:[
        {
            path: '/one',
            name: 'one',
            component: one
        },
        {
            path: '/two',
            name: 'two',
            component: two,
            props: true
        }
    ]
});

问题是，当我第一次打开页面时，一切都很好，第二个组件识别了道具并显示“二，消息是你好”。当我点击它们并且正确传递道具时，路由器链接都工作正常。刷新页面出现问题，只显示“二，消息是”。

我做了什么来解决这个问题：似乎this.$router.push在第二次页面刷新后无法正常工作，原因是重复的导航错误不允许您导航到相同的路线。

题目是：

我是否正确认识了问题？是不是导航重复了？
如果这是问题所在，我怎样才能使路由器组件始终挂载在页面刷新上，并正确传递给它的 prop？

Answer 1

路径中未包含的路由参数（例如 /route/:param）不会在页面重新加载时保留。他们只活了 in-memory 当前会话。

我会做的是

删除 App 组件中的 created 钩子

在你的路由器

中设置一个从/到两个的redirect

{
  path: "/",
  redirect: { name: "two", params: { message: "hello" } }
}

为 two 中的道具设置默认值以处理重新加载

props: {
  message: {
    type: String,
    default: "hello"
  }
}

在 Vuejs 中刷新页面后，Prop 未传递给路由器组件

Prop is not being passed to router component after page refresh in Vuejs

vue.js

vue-router

vue-component