引言
在现代前端开发中，单页面应用（SPA）逐渐成为主流，而Vue.js作为一款渐进式框架，也因其简洁和高效受到了广泛欢迎。在开发单页面应用时，我们常常需要处理不同页面之间的导航与切换，这就需要用到路由管理。而Vue Router正是为了解决这一问题而生的。那么今天我们将了解如何在Vue项目中配置和使用Vue Router，实现组件之间的无缝切换，打造出用户体验更佳的Web应用。
Vue Router
Vue 中所有的 xxx.vue 文件都是一个组件，这些组件最终会被 Vue 读取，并编译成一段 div 结构，挂载在唯一的html文件中，所以，想要实现组件之间的切换很简单。
但是，想要将某些组件当成页面(每个页面对应的url都是唯一的)来用，默认情况下就行不通
那么，我们就需要一个可以将代码片段的切换模拟成页面的跳转的样子的这样一个手段，这就是vue-router
路由（Route）
路由是将特定的 URL 映射到特定的组件。每个路由规则通常包含一个路径和对应的组件。通过定义路由，我们可以在不同 URL下显示不同的组件。例如，当用户访问 /home 路径时，显示Home组件；当用户访问 /about 路径时，显示About组件。
路由视图（Router View）
<router-view> 是一个占位组件，用于渲染与当前URL匹配的组件。在应用模板中指定组件渲染的位置。例如，如果当前路径是 /home，那么 <router-view> 会渲染Home组件。比如：
html
<div id="app">
<router-view></router-view>
</div>实例
接下来，我们将通过一个小 demo 来展示如何在Vue项目中安装和配置Vue Router，并演示一些常见的用法和技巧。
我这里采用的是类似掘金首页的路由跳转。注意点击跳转时，URL 是否有变化，变化了的就是页面进行了跳转也就是路由跳转。
路由配置
安装Vue Router
在开始使用Vue Router之前，我们需要先安装它。可以使用npm进行安装：
js
npm install vue-router@4安装完成后，我们需要在Vue项目中配置Vue Router。
创建路由实例
首先，创建一个路由配置文件（如src/router/index.js），在其中定义路由规则并创建路由实例：
js
import { createRouter, createWebHistory } from "vue-router";
import Home from "../pages/Home.vue";
import Bot from "../pages/Bot.vue";
const router = createRouter({
history: createWebHistory(),
routes: routes,
})
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
children: [
{
path: '/home',
redirect: '/home/suggest'
},
{
path: '/home/newest',
component: () => import('../pages/home/Newest.vue')
},
{
path: '/home/suggest',
component: () => import('../pages/home/suggest.vue')
}
]
},
{
path: '/bot',
component: Bot
},
{
path: '/hot',
component: () => import('../pages/Hot.vue')
}
]
export default router我们的路由配置定义了多个静态和动态路由，同时使用了嵌套路由和重定向。
-
根路径重定向：访问根路径
/时，会自动重定向到/home。 -
/home路由及其子路由：/home路由加载Home组件，并且有三个子路由：
/home重定向到/home/suggest。/home/newest动态加载并显示Newest.vue组件。/home/suggest动态加载并显示suggest.vue组件。
-
/bot路由：访问/bot时，会加载并显示Bot组件。 -
/hot路由：访问/hot时，会动态加载并显示Hot组件。
动态加载组件
细心的朋友会发现我们在加载组件时，有的组件用了不同的方式，部分组件使用了动态加载（异步组件）。这种方式有助于减小初始加载包的体积，提升页面加载速度。不需要再import��入组件。也就是如下这种方式：
js
{
path: '/home/newest',
component: () => import('../pages/home/Newest.vue')
}嵌套(二级)路由
我们定义了 嵌套路由 也可以说是 二级路由，特别是在 /home 路由下，有多个子路由。子路由路径可以是相对于父路由的，也可以是绝对路径。
在Vue实例中使用路由
然后，在入口文件（如src/main.js）中将路由实例引入到Vue实例中并使用它：
js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')导航与跳转
在Vue Router中，导航与跳转是指在不同的路由之间进行切换。Vue Router提供了两种主要的导航方式：使用<router-link>组件和编程式导航。
使用 <router-link> 进行跳转
<router-link> 是用于创建导航链接的组件。它类似于HTML中的 <a> 标签，但具有Vue Router的特殊功能。在我们父组件App.vue中：
html
<template>
<div>
<nav>
<router-link to="/home">首页</router-link> |
<router-link to="/bot">BOT</router-link> |
<router-link to="/hot">沸点</router-link>
</nav>
<!-- 页面 -->
<router-view></router-view>
</div>
</template>to 属性指定目标路径。点击链接时，Vue Router会自动更新 URL 并渲染对应的组件。
编程式导航
编程式导航是指通过编写代码来实现路由的跳转，而不是通过用户点击导航链接。在我们Bot.vue组件中使用 $router.push 方法进行导航：
html
<template>
<div>
<p>BOT page</p>
<button @click="toHot">去沸点</button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const toHot = () => {
// 跳转到沸点
// router.push('/hot');
router.push({ path: '/hot', query: {id: 1}});
}
</script>-
useRouter是Vue Router 4中提供的组合式API钩子，用于获取路由实例。与选项式API中的this.$router类似，useRouter在组合式API中用于访问路由实例。 -
定义了一个按钮，当按钮被点击时，会调用
toHot方法。使用router.push方法跳转到/hot路径，并传递查询参数id=1。
带参数的路由跳转
带参数的路由跳转可以在路径中包含动态参数，或者通过查询参数传递数据。
1. Query：
Query 参数通常用于在URL中附加额外的信息。它们显示在URL的查询字符串部分，并且适用于所有路由，无论是否定义了动态路径参数。
js
router.push({ path: '/hot', query: {id: 1}});在目标组件中，可以通过this.$route.query.id来访问这个参数。 传递的URL会变成类似于 /hot?id=1 的形式。
2. Params：
Params 参数用于动态路径段中，适用于定义了路径参数的路由。例如，显示用户详情的路由 /user/:id。
js
// 通过编程式导航传递 params 参数
router.push({ name: 'user', params: { id: 123 } });
// 使用<router-link>
<router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link>在目标组件中可以通过this.$route.params.id来访问这个参数。传递的URL会变成类似于 /user/123 的形式。
总结
今天，我们学习了Vue Router的使用，掌握了如何配置Vue Router、使用不同方式进行路由跳转以及在跳转时传递参数。
希望通过今天的分享，能够帮助你掌握Vue Router的基本用法，从而在实际项目中更好地管理和组织你的路由。无论你是Vue的新手还是有一定经验的开发者，相信都能为你带来一些有价值的启发和帮助。期待下次的分享。