Vue router无法正常跳转，点击后不能单独显示firstUser页面求助

问题根源 #

你遇到的问题是几个常见的Vue Router使用误区叠加导致的：

• 根组件静态内容未做路由隔离：欢迎标题、回头客模块、已注册用户模块都直接写在App.vue根模板中，不属于路由渲染范围，不管路由如何跳转这些内容都会永久展示，自然无法实现点击后仅显示firstUser页面的效果。
• <router-view>插槽使用逻辑错误：<router-view>的默认插槽是路由未匹配时显示的兜底内容，你当前的写法只会在访问根路径/时显示注册链接，跳转到/firstUser后插槽内容会被替换，但根组件的其他静态内容依然存在。
• <router-link>路径配置错误：to属性如果写相对路径会基于当前路由拼接，要跳转到绝对路径/firstUser需要加前缀/，否则会出现路径拼接错误导致路由匹配失败。
• firstUser组件数据绑定错误：模板里v-model绑定的this.firstName、this.lastName在data中没有对应声明，你把这两个字段嵌套在user数组里了，直接访问会报错，表单无法正常收集数据。
• 组件导入路径不一致：路由文件导入的firstUser路径是@/views/firstUser，App组件导入的是@/components/firstUser.vue，注意检查两个路径指向的是不是同一个文件，避免导入错误。

修复方案 #

第一步：新增首页组件 #

新建src/views/Home.vue，把原本写在App.vue里的首页内容全部迁移进去：

<template>
  <div id="home">
    <h1>Welcome</h1>
    <router-link to="/firstUser"> <first-user/> Register </router-link> 
    <div>
      <h2>Returning user</h2>
      <returning-user />
    </div>
    <div>
      <h2>Registered User</h2>
      <registered-user />
    </div>
  </div>
</template>

<script>
import firstUser from "@/components/firstUser.vue";
import returningUser from "@/components/returningUser.vue";
import registeredUser from "@/components/registeredUser.vue";

export default {
  components: { returningUser, registeredUser, firstUser },
};
</script>

第二步：修改路由配置 #

调整src/router/index.js，新增首页路由规则：

import { createRouter, createWebHistory } from 'vue-router';
import firstUser from '@/views/firstUser';
import Home from '@/views/Home';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/firstUser',
    name: 'firstUser',
    component: firstUser
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

第三步：重写App.vue #

App.vue仅保留路由出口，所有页面内容都交给路由渲染：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style>
#app {
  padding: 20px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input:focus {
  outline: none;
}
</style>

第四步：修正firstUser组件的数据绑定 #

调整firstUser.vue的模板和data声明，修复表单绑定错误：

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

<script>
import myInput from "./UI/myInput.vue";
import myButton from "./UI/myButton.vue";
export default {
  name: "firstUser",
  components: { myInput, myButton },
  data() {
    return {
      // 直接在顶层声明表单绑定的变量
      firstName: "",
      lastName: "",
      users: [],
    };
  },
  methods: {
    registerUser() {
      const newUser = {
        firstName: this.firstName,
        lastName: this.lastName,
      };
      this.users.push(newUser);
      console.log(newUser);
      // 提交后可以加路由跳转回首页的逻辑，按需添加
      // this.$router.push('/')
    },
  },
};
</script>

修改完成后即可实现点击注册链接，页面完全切换到firstUser注册页的效果。

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