Vue Router快速入门

1、什么是Vue Router

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

2、组成

3、快速使用

这里在项目创建的时候就勾选Vue Router，这样我们只需在main.js稍许配置即可，下面奉上完整版main.js代码：（EP,Axios,Router,EP标签，EP中文）EP：Element Plus   

import { createApp } from 'vue'import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'import './assets/main.css'const app = createApp(App)app.use(router)
app.use(ElementPlus, {locale: zhCn})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}app.mount('#app')

正常情况下，我们需要使用<router-link>进行包裹，如码：

            <router-link to="/index"><el-menu-item index="/index"><el-icon><Promotion /></el-icon>首页</el-menu-item></router-link>

若是我们使用了Element Plus中的el menu菜单，根据EP官方文档：

因此，我们只需在<el-menu>标签中加上router属性并设置为true，并在<el-menu-item>标签中加上index属性，如码：

          <el-menu router="true"><!-- 首页菜单 --><el-menu-item index="/index"><el-icon><Promotion /></el-icon>首页</el-menu-item></el-menu>

（1）想要页面显示的区域加上<router-view>标签

        <!--        主要区域--><el-main><router-view></router-view></el-main>

（2）配置router中的index.js（后面还需改进嵌套路由）

import { createRouter, createWebHistory } from "vue-router";import IndexView from "@/views/index/index.vue";
import ClazzView from "@/views/clazz/index.vue";
import DeptView from "@/views/dept/index.vue";
import EmpView from "@/views/emp/index.vue";
import LogView from "@/views/log/index.vue";
import StuView from "@/views/stu/index.vue";
import EmpReportView from "@/views/report/emp/index.vue";
import StuReportView from "@/views/report/stu/index.vue";
import LayoutView from "@/views/layout/index.vue";
import LoginView from "@/views/login/index.vue";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: "/index", name: "index", component: IndexView },{ path: "/clazz", name: "clazz", component: ClazzView },{ path: "/dept", name: "DeptView", component: DeptView },{ path: "/emp", name: "EmpView", component: EmpView },{ path: "/log", name: "LogView", component: LogView },{ path: "/stu", name: "StuView", component: StuView },{ path: "/empReport", name: "EmpReportView", component: EmpReportView },{ path: "/stuReport", name: "StuReportView", component: StuReportView },{ path: "/login", name: "LoginView", component: LoginView },],
});export default router;

4、动态路由组件（rouer-view）嵌套路由

App.vue中：

<script setup></script><template><router-view></router-view>
</template><style scoped></style>

router.index.js中：（完全版）

import { createRouter, createWebHistory } from "vue-router";import IndexView from "@/views/index/index.vue";
import ClazzView from "@/views/clazz/index.vue";
import DeptView from "@/views/dept/index.vue";
import EmpView from "@/views/emp/index.vue";
import LogView from "@/views/log/index.vue";
import StuView from "@/views/stu/index.vue";
import EmpReportView from "@/views/report/emp/index.vue";
import StuReportView from "@/views/report/stu/index.vue";
import LayoutView from "@/views/layout/index.vue";
import LoginView from "@/views/login/index.vue";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: "/",name: "",component: LayoutView,redirect: "/index", //重定向children: [{ path: "index", name: "index", component: IndexView },{ path: "clazz", name: "clazz", component: ClazzView },{ path: "stu", name: "stu", component: StuView },{ path: "dept", name: "dept", component: DeptView },{ path: "emp", name: "emp", component: EmpView },{ path: "log", name: "log", component: LogView },{ path: "empReport", name: "empReport", component: EmpReportView },{ path: "stuReport", name: "stuReport", component: StuReportView },],},{ path: "/login", name: "login", component: LoginView },],
});export default router;