前言

在 Vue.js 中，单页面应用（SPA）的实现通常需要一个路由管理器，如 vue-router。尽管每个 .vue 文件本身就是一个组件，但我们希望用户在浏览器地址栏输入不同的 URL 时，能够看到不同的组件（即页面）内容。这就涉及到路由的概念，即通过 URL 映射到不同的组件上。

路由

Vue 中所有的 .vue 文件都是一个组件，这个组件最终会被 Vue 读取，并编译成一段 div 结构，挂载在唯一的 html 文件中，所以 x 想要实现组件之间的切换很简单。

但是，想要将某些组件当成页面（每个页面对应的 url 都是唯一的）来使用，默认情况下就行不通。

那么，我们就需要一个可以将代码片段的切换模拟成页面跳转的样子 的这样一个手段，这就是 Vue-Router

这里我们用掘金的首页作为例子进入后默认为suggest页面：

点击Bot，跳转到bot界面

点击去沸点，跳转到hot界面：

Vue Router 的作用

vue-router 是 Vue.js 官方提供的路由管理器，它允许开发者将应用的不同组件映射到不同的 URL 路径。通过配置路由规则，vue-router 可以监听 URL 的变化，当 URL 发生改变时，自动切换显示的组件。这样，即使在同一个 HTML 文件中，用户也可以体验到类似多页面应用的页面跳转效果。

路由的配置

在 Vue.js 应用中使用 vue-router，首先需要安装它，然后在主文件中引入并配置路由。基本的配置步骤如下：

安装 vue-router ：根据官方提供的文档（router.vuejs.org/zh/installa...

我们在终端输入：

bash 复制代码

npm install vue-router@4

创建并配置路由：

我们可以在项目中创建一个路由配置文件，例如 router.js，并在其中定义路由规则：

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue';
import Hot from '../pages/Hot.vue';
import { resolveDirective } from 'vue';


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: () => import('../pages/Bot.vue')
},
{
 path: '/hot/:id',
 component: Hot
}
]

const router = createRouter({
history: createWebHistory(),
routes: routes
})

export default router

在主文件中使用路由 ：在 main.js 文件中引入配置好的路由器，并使用它：

javascript 复制代码

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

 createApp(App).use(router).mount('#app')

二级路由

二级路由，或者说嵌套路由，是指在一个父级路由下定义多个子级路由。在 vue-router 中，可以在父级路由组件内部使用 <router-view> 标签来渲染子级路由组件。配置示例如下：

javascript 复制代码

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: () => import('../pages/Bot.vue')},
  {path: '/hot/:id',component: Hot}
]

跳转

在 Vue 中，有多种方式可以进行路由跳转：

使用 `<router-link>` 组件：

这是最常见的路由跳转方式，只需要在 HTML 中使用 <router-link> 组件，并设置 to 属性即可：

html 复制代码

  <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>

<router-view> 标签的位置将会显示与当前 URL 相关联的组件内容，而无需重新加载整个页面。

使用编程式导航：

在组件的方法中使用 $router.push 或 $router.replace 方法进行跳转：

javascript 复制代码

import { useRouter } from 'vue-router'

const router = useRouter()

const toHot = () => {//'去沸点'的按钮绑定了点击事件toHot
//跳转到沸点页面
// router.push('/hot') 不带参数版
router.push({ path: '/hot', query: { id: 1 } })//带参数版

}

参数

在进行路由跳转时，可以通过 query 或 params 两种方式传递参数：

使用 query：

类似于 URL 中的查询参数，可以使用 query 对象来传递参数：
javascript 复制代码
```
this.$router.push({ path: '/hot', query: { id: 1 } });
```
在目标组件中，可以通过 this.$route.query.id 来访问这个参数。
使用 params：

当使用带有动态段 的路由时，可以使用 params 对象来传递参数。例如，路由定义为 /user/:id，则在跳转时可以这样传递参数：
javascript 复制代码
```
this.$router.push({ name: 'user', params: { id: 1 } });
```
在目标组件中，可以通过 this.$route.params.id 来访问这个参数。

结语

以上对就是本文全部内容，本文介绍了从 vue-router 的安装、配置、使用到高级功能如嵌套路由和参数传递等各个方面。希望这对你理解 Vue.js 单页面应用中的路由有所帮助。感谢你的阅读！

Vue中的路由Router

前言

路由

Vue Router 的作用

路由的配置

二级路由

跳转

使用 <router-link> 组件：

使用编程式导航：

参数

结语

使用 `<router-link>` 组件：