Vue.js导航组件无法跳转页面仅刷新当前页问题求助

问题原因 #

你当前用原生<a>标签跳转，会触发浏览器整页刷新，而Vue单页应用（SPA）需要客户端路由实现无刷新页面切换，因此必须安装Vue Router才能解决这个问题。

步骤1：安装Vue Router #

根据你的Vue版本选择对应版本：

• Vue 2.x 安装vue-router@3：

  npm install vue-router@3 --save
  # 或用yarn
  yarn add vue-router@3
  

• Vue 3.x 安装vue-router@4：

  npm install vue-router@4 --save
  # 或用yarn
  yarn add vue-router@4
  

步骤2：配置路由文件 #

在项目src目录下创建router文件夹，新建index.js文件，添加以下配置：

Vue 2.x 路由示例 #

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入你的页面组件（需提前创建对应.vue文件）
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Story from '../views/Story.vue'
import Travel from '../views/Travel.vue'
import RSVP from '../views/RSVP.vue'

Vue.use(VueRouter)

// 定义路由规则
const routes = [
  { path: '/homepage', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/story', name: 'Story', component: Story },
  { path: '/travel', name: 'Travel', component: Travel },
  { path: '/response', name: 'RSVP', component: RSVP },
  // 默认跳转规则：访问根路径自动跳转到首页
  { path: '/', redirect: '/homepage' }
]

const router = new VueRouter({
  // 可选：history模式（需后端配合配置），默认是带#的hash模式
  mode: 'history',
  routes
})

export default router

Vue 3.x 路由示例 #

import { createRouter, createWebHistory } from 'vue-router'

// 导入页面组件（需提前创建对应.vue文件）
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Story from '../views/Story.vue'
import Travel from '../views/Travel.vue'
import RSVP from '../views/RSVP.vue'

const routes = [
  { path: '/homepage', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/story', name: 'Story', component: Story },
  { path: '/travel', name: 'Travel', component: Travel },
  { path: '/response', name: 'RSVP', component: RSVP },
  { path: '/', redirect: '/homepage' }
]

const router = createRouter({
  // history模式，用createWebHashHistory()则为hash模式
  history: createWebHistory(),
  routes
})

export default router

步骤3：在入口文件挂载路由 #

Vue 2.x 修改main.js #

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js' // 导入路由配置

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

Vue 3.x 修改main.js #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

const app = createApp(App)
app.use(router) // 挂载路由
app.mount('#app')

步骤4：修改导航栏组件 #

将原生<a>标签替换为Vue Router提供的<router-link>组件，实现无刷新跳转：

<template>
    <div class="nav-section">
        <nav>
            <span class="logo">D & E</span>
            <ul>
                <li v-for="item in items" :key="item.id">
                    <!-- 用<router-link>替代<a>，:to属性代替:href -->
                    <router-link :to="item.href">{{ item.text }}</router-link>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
import "./navbar.scss";

export default {
    name: 'NavBar',
    data() {
        return {
            items: [
                { id: 1, href: "/homepage", text: "Home" },
                { id: 2, href: "/about", text: "The Wedding" },
                { id: 3, href: "/story", text: "Our story" },
                { id: 4, href: "/travel", text: "Travel & Stay" },
                { id: 5, href: "/response", text: "RSVP" }
            ]
        };
    },
}
</script>

步骤5：添加路由出口 #

在App.vue中必须添加<router-view>标签，用于渲染当前路由对应的页面组件：

<template>
  <div id="app">
    <NavBar /> <!-- 导航栏组件 -->
    <router-view /> <!-- 路由出口，页面内容会在这里渲染 -->
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'

export default {
  components: {
    NavBar
  }
}
</script>

完成以上配置后，点击导航链接即可实现无刷新的页面跳转。

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