五分钟上手Vue Router，组件切换轻松拿捏

为什么要使用路由

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

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

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

使用方法

手动安装Vue Router

vue的源码与Vue Router的源码不是同一份，需要另装一个依赖包。如果现在你已经创建好了一个vue项目，那么再使用npm install vue-router@4手动安装一个路由

实例化一个路由对象

我们创建了一个js文件命名为index.js，放在src目录下的router文件夹中

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

const routes = [
    {
        path: 'xx',
        component: xxx
    },
    {
        path: 'xx',
        component: xxx
    }
]
const router = createRouter({   
    history: createWebHistory(),  
    routes: routes
})

export default router  

代码解释：

行1：从 vue-router 库中导入了 createRouter 和 createWebHistory 函数。createRouter 用于创建路由实例，而 createWebHistory 则用于创建一个基于浏览器历史记录的路由历史模式。

行3~12：定义一个数组 routes作为路由配置的列表，每个路由对象应该包含至少一个 path 和一个 component 属性。本文往后滑有配置的例子。

行13~16：调用createRouter函数，并传递一个对象作为参数，该对象中有两个键值对，分别代表路由模式和路由配置列表的数组。这样就创建回来一个路由实例并赋给router

行18：将路由实例抛出，让其能在vue框架中被使用

引入路由

在main.js文件，从上述index.js中引入路由，并安装到vue程序中

import { createApp } from 'vue'    // 引入vue
import App from './App.vue'    // 引入根组件
import router from './router/index.js'  // 引入路由

// 让vue读懂根组件App，并安装router到vue程序中，再将根组件转变为真实的HTML挂载到ID为app的容器上面
createApp(App).use(router).mount('#app') 

引入语句也可以写成import router from './router'，因为index在js中被认为是默认文件，就算省略index.js不写，它也会自动去读取router文件夹下的默认文件index.js

实现一个小demo

效果演示

demo中有两级导航栏，一级“首页、BOT、沸点”，另一级首页中的“最新、推荐”，那么就要实现两级路由

项目目录

一级路由

根组件App.vue主要代码

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

代码解释：

Vue Router只提供了两个标签<router-link> 和 <router-view>

<router-link>用于创建带有导航功能的链接，它会生成一个 <a> 标签或者一个 <button> 标签（取决于 tag 属性），并且它必须带一个属性to指定目标路由

<router-view>用于渲染与当前活动路由相匹配的组件，是路由入口

配置路由

组件路由有静态组件路由和动态组件路由两种：组件Home和Bot就是静态导入，预先import两个组件，当用户访问 /home或/bot 路径时，会加载并显示 Home.vue或Bot.vue 组件；组件Hot是动态导入，用了 ES6 的箭头函数和import()语法。动态导入更为方便，也是路由懒加载的原理

路由懒加载：一种优化技术，它允许你仅在用户导航到特定路由时才加载相应的组件，可以显著减小初始加载时间

重定向路由：代码6~9行，这个规则表示当用户访问应用的根路径（即 /）时，会被重定向到 /home 路径。这是常见的做法，可以默认展示应用的主页。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue'
import Bot from '../pages/Bot.vue'

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/bot',
        component: Bot
    },
    {
        path: '/hot',
        component: () => import('../pages/Hot.vue')
    }
]

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

export default router  

此时代码效果如下，一级导航栏各页面的跳转就完成了：

二级路由

将某个页面作为另一个页面的子页面展示，就需要将该子页面的路由配置成父页面的二级路由

首页、BOT、沸点这三个页面是项目的一级页面，而最新、推荐这两个页面是首页中独有的两个页面，是项目的二级页面，同理在Home.vue中放置<router-link> 和 <router-view>两种标签，并在路由配置文件中配置二级路由

首页Home.vue主要代码

<template>
    <div>
        <h2>home page</h2>
        <div class="nav">
            <router-link to="/home/newest">最新</router-link>  |
            <router-link to="/home/suggest">推荐</router-link>
        </div>
    </div>

    <router-view></router-view>
</template>

配置路由

不能直接在routes数组中增添组件路由对象，而应该在Home的组件路由对象中增添一个children键值对，值也为一个数组，格式与routes数组相同

{
    path: '/home',
    component: Home,
    children: [
        {
            path: '/home',
            redirect: '/home/suggest'
        },
        {
            path: '/home/newest',
            component: () => import('../pages/home/Newst.vue')
        },
        {
            path: '/home/suggest',
            component: () => import('../pages/home/Suggest.vue')
        },
    ]
}

此时通过点击导航栏跳转页面的效果基本实现，接下来再实现通过点击一个页面中的按钮跳转另一个页面的效果：

编程式导航跳转

从vue-router库中引入钩子函数useRouter，调用这个函数拿到路由对象，调用这个对象的内置方法push导航至指定路径

还能携带参数跳转：push方法中传递path和query两个字段，query 字段是一个对象，其中的键值对会被添加到 URL 的查询字符串中

Bot.vue代码

<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, name: 'zhangsan'}})  
    }
</script>

以上就是对Vue Router的基本应用介绍，更加完备详细的用法应参考官方文档router.vuejs.org/zh/

有什么问题欢迎大家在评论区中指正交流，希望与大家共同进步~