Vue.js两个组件间路由跳转仅更新URL页面无跳转问题咨询

• 问题1：App.vue模板缺少路由出口
  你当前把<Home/>和<AddService/>组件硬编码在模板中，路由切换不会触发这两个组件的替换。需要将其替换为<router-view>标签，路由匹配到的组件会自动渲染到该位置。
  修改后template代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

• 问题2：router实例未挂载到Vue根实例
  你已经创建了router实例并调用Vue.use(VueRouter)，但没有将router实例传入Vue根实例的配置，Vue无法识别路由规则。
  建议将路由配置抽离到src/router/index.js文件：

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import AddService from '../components/AddService.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/addService',
            name: 'addService',
            component: AddService
        }
    ]
})

export default router

在入口文件main.js中挂载router实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

修改后App.vue的script可以删除路由相关逻辑，只保留组件基础配置即可。

• 问题3：使用原生a标签跳转不符合Vue路由规范
  原生a标签会触发页面刷新，走后端请求逻辑，无法触发前端路由切换。将Home页面的跳转代码替换为router-link组件：

<router-link to="/addService">Add a new Service</router-link>

如果需要保留a标签样式，可添加点击事件阻止默认跳转行为，用编程式导航实现路由切换：

<a href="../addService" @click.prevent="$router.push('/addService')">Add a new Service</a>

完成以上修改后路由即可正常切换。

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