掌握Vue路由：轻松打造流畅、互动的单页应用体验！

前言

在 Vue.js 中，路由是一种管理应用不同页面或视图之间导航的机制。Vue 提供了官方路由库 Vue Router，它允许开发者定义 URL 路径和与之关联的组件。当用户访问某个特定路径时，Vue Router 会渲染对应的组件。

通过 Vue Router，你可以创建单页应用（SPA），其中多个页面共享一套 HTML 和 JavaScript 文件，而无需重新加载整个页面。主要步骤包括：安装 Vue Router、配置路由路径和组件、使用 <router-link> 创建导航链接，以及在主模板中使用 <router-view> 组件显示当前路由对应的内容。

Vue Router 提供了多种功能，例如动态路由、嵌套路由、命名路由和路由守卫，帮助开发者构建复杂的导航结构和实现权限控制。总之，Vue Router 是 Vue.js 开发单页应用中不可或缺的工具。

我们首先给大家讲解我们这次要实现的内容。

一级导航包括首页，bot，沸点，其中首页又包括最新和推荐，我们默认显示首页以及首页中的推荐。其中上面的链接也会相应进行跳转。

npm install vue-router@4

在我们把vue文件创建好了之后，我们首先引入路由相关的库。

建立准备文件

我们首先去建立五个我们的vue文件用作跳转，这里我们主页分为home，bot，hot三个一级路由，home又有newest和suggest两个二级路由，我们只需要在里面随便填充一些内容就好，具体操作我们后面再看。

创建路由文件

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

export default router

我们首先引入路由创建实例函数和模式函数，并通过这种方式去创建路由的实例对象，然后再将其导出，其中routes是我们的核心也是接下来讲解的重点内容。

import router from './router/index'
createApp(App).use(router).mount('#app')

然后我们在最大的main.js文件里引入这个路由文件即可。

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>

1. 导航菜单：

   • 包含三个导航链接，分别指向 /home（首页）、/bot（BOT 页面）和 /hot（沸点页面）。
   • 这些链接用于在不同页面之间进行导航。

2. 路由视图：

   • 一个 <router-view> 占位符，用于显示当前路由对应的组件内容。
   • 当用户点击导航链接时，相应的页面组件将会在这个占位符位置呈现出来。

这个App.vue是我们的一级文件，里面主要内容是router-link以及router-view，前者是我们取的点击时将要跳转地址，后者是显示我们的文件。

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

1. 标题： 显示 "home page" 的标题。
2. 导航链接 ： 两个导航链接，分别指向 /home/newest 和 /home/suggest 路径。这些链接用于在页面间进行导航。
3. 路由视图 ： 一个 <router-view> 占位符，用于显示当前路由对应的子组件内容。当用户点击导航链接时，相关的子组件（例如 newest.vue 或 suggest.vue）将会在这里呈现。

因为我们的home会进行再次跳转页面的操作，因此我们也和上面类似，但是不同的是在我们跳转后，为了继承到上一级的地址，前面加上home。

routes数组

vue文件里link点击时会改变地址，那么怎么才能够显示我们想要的文件呢？这就要好好来看看我们的routes数组了。

import home from '../pages/home.vue'
import bot from '../pages/bot.vue'
import hot from '../pages/hot.vue'
const routes = [
    {
        path: '/',
        redirect: '/home',
    },
    {
        path: '/home',
        component: home,
        children: [
            {
                path: '/home',
                redirect: '/home/suggest'
            }
            ,
            {
                path: '/home/newest',
                component: () => import('../home/newest.vue')
            },
            {
                path: '/home/suggest',
                component: () => import('../home/suggest.vue')
            }
        ]
    },
    {
        path: '/bot',
        component: bot
    },
    {
        path: '/hot',
        component: hot
    },

]

1. 导入组件 ： 导入了三个页面组件 home.vue、bot.vue 和 hot.vue，这些组件将被用于不同的路由路径。

2. 根路径重定向 ： 当用户访问根路径 / 时，会自动重定向到 /home 路径。

3. /home 路由及其子路由：

   • 当用户访问 /home 路径时，将会加载 home 组件。

   • /home 路径下包含子路由：

     • 如果访问 /home（不带其他路径），将被重定向到 /home/suggest。
     • 访问 /home/newest 路径时，将会懒加载并显示 newest.vue 组件。
     • 访问 /home/suggest 路径时，将会懒加载并显示 suggest.vue 组件。

4. /bot 路由 ： 当用户访问 /bot 路径时，将会加载 bot.vue 组件。

5. /hot 路由 ： 当用户访问 /hot 路径时，将会加载 hot.vue 组件。

首先我们引入三个vue文件，放入component中，然后path是和我们之前link对应的路径，这样在我们点击时，那个路径时就会跳转到这个对应的页面。

然后默认跳转是通过path给'/'然后redirect给跳转的文件。

我们还设置了二级路由，即在home里面加了一个children数组，里面给了我们link对应的路径以及实际我们的跳转文件。二级默认跳转则是通过我们类似的方式进行跳转。

关于页面内点击跳转和传参

上面只讲到了我们点击链接进行跳转而有没有一种可能，我们可以点击此页面除了标题链接之外的内容也可以进行跳转呢？我们在某个页面设置一个按钮绑定点击事件。

import { useRouter} from 'vue-router'

const router = useRouter()
const toHot = () => {
router.push('/hot')//不传参

router.push({path:'/hot', query:{id: 1}})//传参


} 
</script>

我们首先引入函数体useRouter并且将其实例化，然后在点击事件里采用push的放入推入路径则是不传参，推入对象则是传参。

我们点击这里的去沸点

可以发现到达了沸点并且成功传入参数。

看完本篇文章之后强烈建议大家自己重新写一个简单的route跳转页面的vue项目，一定会非常有收获！