左侧菜单路由配置

MagnumHou 2023-01-13 03:23:04

课时名称	课时知识点
左侧菜单路由配置	左侧菜单路由配置

...全文

134 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

多级菜单的图标添加及路由配置.rar

layui，登陆，左侧菜单实现

本文详细介绍了如何使用Vue3和Element-Plus实现点击左侧菜单时在Main区域显示不同内容组件的功能。首先，通过将左侧菜单列表改造成路由链接的形式，并开启路由模式。接着，监听跳转的路由链接，实现点击二级菜单列表时在Main区域展示不同的内容组件。文章还提供了各组件代码示例，包括路由规则配置、Home.vue组件和Users.vue组件的实现细节。此外，还介绍了Vue3的优点，如使用Proxy代替defineProperty实现响应式、更好的TypeScript支持以及新的Composition API等特性。

环境配置 Node 下载地址http://nodejs.cn/ 安装文件下有一个绿色的图片交node.exe 点击运行输入node -v进行检测是否安装成功使用vue-cli(脚手架)搭建项目 vue-cli是vue官方提供的用域搭建基于vue+webpack_es6项目的脚手架工具在线文档：https://github.com/vuejs/vue-cli 操作： 1.npm install -g vue-cli：全局下载工具 2.vue init webpack 项目名：下载基于webpack模板项目 3.cd 项目名：进入项目目录 4.npm install :下载项目依赖的所有模块 5.npm run dev ：运行项目 6.访问项目：localhost:8080 项目目录结构 src assets:存放照片、css、js css js img components:存放组件 lib：存放模拟数据 router:配置路由 store:存放vuex vuex的安装：cd x项目目录 cnpm install vuex --save views:存放所有单页面配置访问端口号：根目录下有一个config文件夹，看名字就知道与配置有关，打开config目录下的index.js dev: { env: require('./dev.env'), port: 8092, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, } 项目目录下：https://blog.csdn.net/weixin_39378691/article/details/83784403 1.安装elementUI：cd进入项目根目录，npm i element-ui -S 2.引入elementUI组件（main.js文件中） import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element, { size: 'small' }) 项目目录下：https://blog.csdn.net/weixin_41432849/article/details/81988058 1.安装jquery：cd进入项目根目录， npm install jquery --save 2.在项目 build 里的webpack.base.conf.js 里加载webpack文件，注意，要放在配置文件第一行； const webpack = require('webpack') 3.在module.exports的最后加入 , plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", jquery:"jquery", "window.jQuery":"jquery" }) ]

若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由（第一个子菜单）

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

vue.js前端框架html5 企业社区天津·河西区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

核心使命：为IT从业者和技术爱好者提供一个优质的学习、交流和分享平台，促进技术创新和成长。
注意事项：请保持尊重、友善的交流环境，遵守社区规则，禁止发布违法、侵权、低俗或有害信息。
激励机制：为了鼓励积极参与社区的用户，我们会设置积分和勋章系统，支持高质量的原创内容和有益的互动。
感谢您的加入，期待与您一起在CSDN社区共同探索技术，交流经验，共同成长！

试试用AI创作助手写篇文章吧

+ 用AI写文章