为什么Vue Router跳转时其他组件仍渲染且未跳转至对应页面？

问题根因分析 #

1. 导航内容硬编码在App根组件导致一直显示 #

你当前把欢迎文案、三个跳转链接都直接写在了App.vue的模板里，而<router-view>是放在这些内容的下方。路由跳转时只会切换<router-view>位置渲染的组件，App里硬编码的内容永远不会消失，所以看起来就是新内容追加在原有内容下方，没有跳转效果。

2. firstUser组件存在变量绑定错误 #

你的firstUser组件里v-model绑定了this.firstName、this.lastName，但是data中没有声明这两个变量，会导致控制台报错，功能异常。

修复方案 #

步骤1：调整App.vue结构 #

把App.vue里硬编码的导航内容移除，仅保留路由出口即可：

<template>
  <router-view />
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>

步骤2：新增首页路由组件 #

新建@/views/home.vue，把原来App里的导航内容移到这个组件里：

<template>
  <div id="app">
    <h1>Welcome</h1>
    <div>
      <h2>Are you first time visiting?</h2>
      <router-link to="/firstUser"> Register </router-link>
    </div>
    <div>
      <h2>Continue with registration</h2>
      <router-link to="/returningUser"> Continue </router-link>
    </div>
    <div>
      <h2>Show all your info</h2>
      <router-link to="/registeredUser"> show </router-link>
    </div>
  </div>
</template>

步骤3：在router/index.js中添加首页路由 #

import home from '@/views/home'

const routes = [
  // 新增根路径路由
  {
    path: '/',
    name: 'home',
    component: home
  },
  // 原有三个路由保留
  {
    path: '/firstUser',
    name: 'firstUser',
    component: firstUser,
  },
  {
    path: '/returningUser',
    name: 'returningUser',
    component: returningUser,
  },
  {
    path: '/registeredUser',
    name: 'registeredUser',
    component: registeredUser,
  },
]

步骤4：修复firstUser组件的变量错误 #

调整data声明和v-model绑定逻辑，移除v-model里的this，修正变量引用：

<template>
  <div>
    <form class="form" @submit.prevent="registerUser">
      <h4 class="">Register</h4>
      <my-input
        v-model="user.firstName"
        type="text"
        class="input"
        placeholder="First Name"
      />
      <my-input
        v-model="user.lastName"
        type="text"
        class="input"
        placeholder="Last Name"
      />
      <myButton @click="registerUser"> Register </myButton>
    </form>
  </div>
</template>

<script>
import myInput from "@/components/UI/myInput.vue";
import myButton from "@/components/UI/myButton.vue";
export default {
  name: "firstUser",
  components: { myInput, myButton },
  data() {
    return {
      // 把user从数组改成对象，存储当前填写的用户信息
      user: {
        firstName: "",
        lastName: "",
      },
      users: [],
    };
  },
  methods: {
    registerUser() {
      const newUser = {
        firstName: this.user.firstName,
        lastName: this.user.lastName,
      };
      this.users.push(newUser);
      console.log(newUser);
      // 提交后可以清空表单
      this.user = { firstName: "", lastName: "" }
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者Eternal