Vue Router 入门指南：从零开始构建单页应用的路由系统

今天我们来聊聊vue-router，在此之前我们首先要有vue 单页应用这个概念，在vue的整个项目中其实只有一个html文件，在vue中我们写的每个页面其实只是html文件中的一个代码片段，我们通过一些特殊的手段来实现每次只让一个代码片段生效，这样就实现了多个html文件一样的效果。

vue-router

接下来，我们来介绍一下这些特殊手段之一的vue-router

创建路由

我们要使用vue-router，就需要下载其依赖，把你的项目在终端打开，输入命令：npm install vue-router@4(在vue router官方文档可以找到)，
在scr文件夹下新建一个文件夹，在该文件夹下创建一个js文件来创建并配置路由
在js文件中进行配置：

js 复制代码

import { createRouter, createWebHashHistory } from 'vue-router' // 导入我们要用到的函数


// 路由配置数组
const routers = [

]
// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(), // 使用哈希模式的路由历史记录
  routes: routers // 路由配置数组
})


export default router // 导出路由实例

在main.js中引入

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入创建的路由实例

createApp(App)
.use(router) // 使用路由实例
.mount('#app')

这样我们就基本完成了路由的创建，接下来就是配置和使用。

配置路由

假设我们有一个首页(Home.vue)，有一个分类页面(Sort.vue)，其中首页下面又有两个子页面最新(New.vue)和推荐(Recommend.vue),那么我们可以这样来配置路由：

我们先配置首页和分类页面的路由，在上面创建好的路由配置数组当中进行如下操作

js 复制代码

const routers = [
    {
        path: '/home', // 配置路由路径
        name: 'home', // 配置路由名，用于在代码中引用
        component: () => import ('../views/Home.vue'), // 该路由对应的组件 '../views/Home.vue' 表示组件的路径
    },
    {
        path: '/sort',
        name: 'sort',
        component: () => import ('../views/Sort.vue'),
    },
]

接下来我们配置二级路由，也就是最新和推荐两个页面的路由，因为最新和推荐两个页面是首页的子页面，所以我们在首页的路由配置中通过使用children选项来实现二级路由的创建

js 复制代码

 {
        path: '/home', // 配置路由路径
        name: 'home', // 配置路由名，用于在代码中引用
        component: () => import ('../views/Home.vue'), // 该路由对应的组件 '../views/Home.vue' 表示组件的路径
        children: [
            {
                path: '/home/new',
                name: 'new',
                component: () => import ('../views/New.vue'),
            },
            {
                path: '/home/recomment',
                name: 'recomment',
                component: () => import ('../views/Recomment.vue'),
            },
        ]
    },

使用路由

当用户访问不同的路由路径时，Vue Router 会根据路由配置找到对应的组件，并将其渲染到 <router-view></router-view> 标签所在的位置
可以使用<router-link></router-link>标签进行跳转，例：

vue 复制代码

<template>
  <div>
    <router-link to="/home">首页</router-link> // /home 为所在页面的路径
    <router-link to="/sort">分类</router-link>
  </div>
  <router-view></router-view>
</template>

二级路由的使用也是同理，我们在首页使用<router-view></router-view>，然后使用<router-link></router-link>标签进行跳转

vue 复制代码

<template>
    <div>
        <router-link to="/home/new">最新</router-link>
        <router-link to="/home/recomment">推进</router-link>
    </div>
    <router-view></router-view>
</template>

除了使用<router-link></router-link>外，我们还可以通过编程式(绑定事件)导航来跳转页面

this.$router.push('/home')

this.$router.push({ path: '/home', query: { id: 123 } }) 可以传参数过去

this.$router.push({ name: 'home' , params: { id: 123 } }) 需要在路径后面加上/:id

今天的分享就到这里。