1、先安装路由: npm install vue-router 2、建立路由文件: ``` import {createRouter, createWebHistory} from"vue-router"; import HelloWorld from'./components/HelloWorld.vue'import Form from'./components/Form.vue'import Menu from'./components/menu.vue'import Cardnum from'./components/cn.vue'//路...
1. 按脚手架初始化项目 进入vue官网的快速上手,按照官网所述,执行:npm create vue@latest,然后,按照提示选择 typescript / vue-router / pinia(如下图) 注释:如果不选择pinia,初始化的项目里就默认没有状态管理库,然后就只能自己去配置 vuex 或 pinia 了。 初始化后,项目的目录如下图所示(不含ts vs 含ts...
npm install element-plus--save 快速上手 在main.js 中写入以下内容: 代码语言:javascript 复制 import{createApp}from"vue";importElementPlusfrom"element-plus";import"element-plus/lib/theme-chalk/index.css";importAppfrom"./App.vue";importrouterfrom"./router";importstorefrom"./store";constapp=create...
// 登录接口调用后,调用路由接口,后端返回相应用户的路由res.router,我们需要存储到store中,方便其他地方拿取 this.$store.dispatch("addRoutes", res.router); 1. 2. 到这里,整个动态路由就可以走通了,但是页面跳转、路由守卫处理是异步的,会存在动态路由添加后跳转的是空白页面,这是因为路由在执行next()时,rout...
Node、Npm、Vue3、Vite、TS、VueRouter、Element-Plus等依赖和插件安装。 Node安装 参照官网安装最新Node 使用nvm管理和安装 (PS:mac和window对于nvm的安装顺则顺,不顺会很难整,给进阶者使用,不建议小白硬整。) Npm安装镜像 Node装好了就自带了,但是需要使用国内镜像。
先上流程图,有更好的方案欢迎提出 动态路由菜单流程图 检查登录过期并不是必须的,这里只是演示作用,如果后端有做的话,在请求拦截器里面判断更好 // index.tsconstrouter=createRouter({// import.meta.env.BASE_URL 通过vite.config的base设置,默认为‘/’history:createWebHistory(import.meta.env.BASE_URL),rou...
router.matcher = newRouter.matcher; // router就是真·路由啦,当然重点是这个macther 1. 2. 好了,坑介绍完了,此文对想直接拷代码的盆友可能不太友好,想拷/看详细代码可以去看其他的文了,还是好找的。只要注意避让这两个坑,就应该不会有什么大问题啦!
app.use(pinia).use(router).mount("#app"); 新建store/index文件用于存放 pinia 管理的状态,同时这里我们定义了获取菜单的方法GenerateRoutes import { defineStore } from "pinia"; import { getMenuList } from "@/http/menu/index"; import router from "@/router"; ...
exportdefaultrouter; axios 1.接口处理我选择的是axios,由于它遵循promise规范,能很好的避免回调地狱。现在我们开始安装 代码语言:javascript 复制 cnpm install axios-S 2.在src目录下新建文件夹命名为api,里面新建两个文件,一个是api.js,用于接口的整合, 另一个是request.js,根据相关业务封装axios请求。
(2)使用element-plus的tabs和menu组件配合vue-router来切换页面。 (3)el-menu组件中有一个default-active的属性表示默认激活菜单的 index,用它来绑定 :default-active="activeTabsPath",这里需要先把el-menu组件的router属性设置为true(表示以index为路径进行跳转),el-menu-item的index属性绑定为路由路径(如:index=...