Vue Router

目录

一、Vue Route介绍

二、Vue Route基本使用

三、子路由

一、Vue Route介绍

Vue Router 是 Vue.js官方的路由管理器。它允许你通过定义路由规则，将不同的 URL 映射到不同的 Vue 组件，从而构建单页应用 (SPA - Single Page Application)。简单来说，它让你可以在不重新加载整个页面的情况下，切换显示不同的页面内容。

二、Vue Route基本使用

1.安装Vue Route

npm install vue-router@4

2.在src/router/index.js中创建路由器，首先导入Vue Route，定义路由的关系，创建路由器，导出

//导入vue-router import { createRouter, createWebHistory } from 'vue-router' //导入组件 import LoginVue from '@/views/Login.vue' import LayoutVue from '@/views/Layout.vue' import ArticleCategoryVue from '@/views/article/ArticleCategory.vue' import ArticleManageVue from '@/views/article/ArticleManage.vue' import UserInfoVue from '@/views/user/UserInfo.vue' import UserAvatarVUe from '@/views/user/UserAvatar.vue' import UserResetPasswordVue from '@/views/user/UserResetPassword.vue' //定义路由关系 const routes = [ { path: '/login', component: LoginVue }, { path: '/', component: LayoutVue , } ] //创建路由器 const router = createRouter({ history: createWebHistory(), routes: routes }); export default router

3.在vue实例中main.js文件夹下使用Vue Route

import router from './router' app.use(router)

4.声明router-view标签，展示组件内容

//获取路由 //从vue-router库中导入一个叫useRouter的函数,mn nb nb 它能让你在 <script setup> 中访问路由实例。 import { useRouter } from 'vue-router' const router = useRouter(); //登录 const login = async () => { ElMessage.success('登录成功') router.push('/') }

三、子路由

1.在src/router/index.js中配置子路由，使用 children数组

//导入vue-router import { createRouter, createWebHistory } from 'vue-router' //导入组件 import LoginVue from '@/views/Login.vue' import LayoutVue from '@/views/Layout.vue' import ArticleCategoryVue from '@/views/article/ArticleCategory.vue' import ArticleManageVue from '@/views/article/ArticleManage.vue' import UserInfoVue from '@/views/user/UserInfo.vue' import UserAvatarVUe from '@/views/user/UserAvatar.vue' import UserResetPasswordVue from '@/views/user/UserResetPassword.vue' //定义路由关系 const routes = [ { path: '/login', component: LoginVue }, { path: '/', component: LayoutVue , // 默认进入,重定向 redirect: '/article/category', children: [ { path: '/article/category', component: ArticleCategoryVue }, { path: '/article/manage', component: ArticleManageVue }, { path: '/user/info', component: UserInfoVue }, { path: '/user/avatar', component: UserAvatarVUe }, { path: '/user/password', component: UserResetPasswordVue }, ] } ] //创建路由器 const router = createRouter({ history: createWebHistory(), routes: routes }); export default router

2.在el-menu-item标签中设置index属性

<!-- 文章分类 --> <el-menu-item index="/article/category"> <el-icon> <Management /> </el-icon> <span>文章分类</span> </el-menu-item> <!-- 文章管理 --> <el-menu-item index="/article/manage"> <el-icon> <Promotion /> </el-icon> <span>文章管理</span> </el-menu-item> <!-- 个人中心（子菜单） --> <el-sub-menu index="user"> <template #title> <el-icon> <UserFilled /> </el-icon> <span>个人中心</span> </template> <el-menu-item index="/user/Info"> <el-icon> <User /> </el-icon> <span>基本资料</span> </el-menu-item> <el-menu-item index="/user/Avatar"> <el-icon> <Crop /> </el-icon> <span>更换头像</span> </el-menu-item> <el-menu-item index="/user/Password"> <el-icon> <EditPen /> </el-icon> <span>重置密码</span> </el-menu-item> </el-sub-menu> </el-menu> </el-aside>