在 Vue 中实现路由跳转主要依赖于 Vue Router 库。以下是详细步骤和示例代码：

---

1. 安装 Vue Router

使用 npm 或 yarn 安装：

npm install vue-router
# 或
yarn add vue-router

---

2. 配置路由

创建路由实例 (router/index.js)

javascript">import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home' // 重定向到首页},{path: '/home',name: 'Home',component: Home},{path: '/about',name: 'About',component: About,// 路由独享守卫beforeEnter: (to, from, next) => {console.log('进入 About 页');next();}},{path: '/user/:id', // 动态路由name: 'User',component: User,props: true // 将路由参数作为 props 传递},{path: '*', // 404 页面component: () => import('../views/NotFound.vue') // 路由懒加载}
]const router = new VueRouter({mode: 'history', // 去掉 URL 中的 # 号routes
})// 全局前置守卫
router.beforeEach((to, from, next) => {console.log(`跳转到 ${to.path}`);next(); // 确保调用 next()
})export default router

---

3. 挂载路由到 Vue 实例 (main.js)

javascript">import Vue from 'vue'
import App from './App.vue'
import router from './router'new Vue({router, // 注入路由render: h => h(App)
}).$mount('#app')

---

4. 在组件中使用路由

模板中跳转：<router-link>

<template><div><nav><router-link to="/home">首页</router-link><router-link :to="{ name: 'About' }">关于</router-link><router-link :to="'/user/' + userId">用户页</router-link></nav><router-view></router-view> <!-- 路由出口 --></div>
</template><script>
export default {data() {return {userId: 123}}
}
</script>

---

编程式导航：this.$router.push()

javascript">// 方法示例
methods: {goToHome() {this.$router.push('/home');},goToAbout() {this.$router.push({ name: 'About' });},goToUser() {this.$router.push({ path: `/user/${this.userId}` });},replace() {this.$router.replace('/home'); // 替换当前历史记录}
}

---

5. 处理动态路由参数

在 User.vue 组件中获取参数：

<template><div><h1>用户 ID: {{ id }}</h1><!-- 或通过 $route.params.id 访问 --></div>
</template><script>
export default {props: ['id'], // 通过 props 接收参数（需在路由配置中设置 props: true）created() {console.log(this.$route.params.id); // 通过 $route 对象获取}
}
</script>

---

6. 嵌套路由

配置子路由：

javascript">// router/index.js
{path: '/settings',component: Settings,children: [{path: 'profile',component: Profile},{path: 'account',component: Account}]
}

在 Settings.vue 中放置嵌套的 <router-view>：

<template><div><h1>设置</h1><router-link to="/settings/profile">个人资料</router-link><router-link to="/settings/account">账户</router-link><router-view></router-view></div>
</template>

---

关键点总结

1. 路由模式：mode: 'history' 用于去除 URL 中的 #。
2. 懒加载：使用 () => import('./Component.vue') 分割代码块。
3. 导航守卫：控制路由跳转逻辑（全局、路由独享、组件内）。
4. 路由传参：
   • 动态参数：/user/:id + $route.params.id
   • 查询参数：/user?name=John + $route.query.name
   • Props 传参：更解耦的方式。
5. 错误处理：通配符路由 path: '*' 用于 404 页面。

通过以上步骤，你可以在 Vue 应用中实现灵活的路由跳转和页面导航。