Vue 路由

简介

作用是当访问不同路径的时候，显示不同的页面

使用

1
npm install vue-router@4

创建src/router/index.js作为路由文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//导入vue-router
import { createRouter, createWebHistory } from "vue-router";
//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes = [
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue}
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
})

//导出路由
export default router
解释
  1. 导入必要的模块和组件：

import { createRouter, createWebHistory } from "vue-router";：从 vue-router 库中导入 createRouter 和 createWebHistory 函数。
import LoginVue from '@/views/Login.vue';：导入 Login.vue 组件作为登录页面。
import LayoutVue from '@/views/Layout.vue';：导入 Layout.vue 组件作为布局页面。

  1. 定义路由规则：

const routes：定义一个路由规则数组。
{ path: '/login', component: LoginVue }：当访问 /login 路径时，渲染 LoginVue 组件。
{ path: '/', component: LayoutVue }：当访问根路径 / 时，渲染 LayoutVue 组件。

  1. 创建路由器实例：

使用 createRouter 函数创建一个路由器实例。
history: createWebHistory()：使用 createWebHistory 创建一个基于 HTML5 History API 的路由历史记录。
routes: routes：将之前定义的路由规则数组赋值给路由器的 routes 选项。

  1. export default router;：将创建的路由器实例导出，以便在其他地方使用。

在main.js中导入

1
2
3
4
5
6
7
//因为文件名是 index.js 所以可以直接写文件夹名
import router from '@/router'

……

//使用路由
creareApp(App).use(router).mount('#app')

App.vue启用

1
2
3
4
5
6
7
8
9
<script setup>
</script>

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

<style scoped>
</style>

标签 <router-view></router-view> 是写死的，必须是这样子，不能自闭合

写在哪里，哪里就可以渲染路由的页面

使用路由跳转

1
2
3
4
import {useRouter} from 'vue-router' //从路由导入 useRouter对象
const router = useRouter()

router.push('/')

子路由

在路由关系中给一级路由添加children属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    {
        path: '/', component: LayoutVue,
        redirect: '/article/manage', // 重定向
        children: [ // 子路由
            { path: '/article/category', component: ArticleCategoryVue },
            { path: '/article/manage', component: ArticleManageVue },
            { path: '/user/info', component: UserInfoVue },
            { path: '/user/avatar', component: UserAvatarVue },
            { path: '/user/resetPassword', component: UserResetPasswordVue }
        ]
    }
]

如果使用的是Element-Plus，需要在 <el-menu-item>添加 index 属性，指向具体路径

1
<el-menu-item index="/user/info">

在一级路由添加redirect就可以重定向到其他路径，上面代码登录完跳转到/路径的时候，就会自动重定向到/article/manage路径上