今天完成了手头任务就想着做点什么,刚好领导让我看看项目左侧菜单栏不刷新的问题,我也是刚刚接触vue,很多东西都还不是很熟练,这也是我的第一篇自己写的博客,感觉还是很兴奋的,我觉得写博客这个习惯要一直养成,不但总结了自己一天的工作所得,而且也是对自己的一种良好习惯的养成。
下面进入正题。
这个是我们html里面的超链接,而我们的点击事件的跳转就是通过这个超链接实现的。
<el-menu-item index="3-1"><a href="#/commodity-list" rel="external nofollow" >
然后我们要创建一个js文件,将我们要跳转的路径导入
import ChannelList from './src/commodity-manage/channel-list/channel-list'
配置路由管理:
const router = new VueRouter({ routes: [ { path: '/commodity-list', name: 'commodity-list', component: commodityStorage, children: [] } ]
path:就是我们要跳转的路径
name:跳转文件的名字
component:配置了映射的组件
在html文件中配置了<router-view/>
<router-view :key="key"></router-view>
是用来渲染通过路由映射过来的组件,当路径更改时,<router-view> 中的内容也会发生更改
在js文件中使用computed来进行监听
//每次让路由生成不同的值,用于重新加载组件,达到刷新数据的效果 computed: { key() { return this.$route.name !== undefined"color: #ff0000">补充知识:vue:路由菜单(element 和 antd)在 vue 中 使用 UI框架中的菜单,给菜单如何添加路由呢?其中会出现路由样式的问题。请看下面两种UI方法。
注)使用框架的时候注入知道的吧。。。。。防止有些人xxxx,我还是写一下。
场景:使用 elementUI 的 NavMenu 时。
这里请注意:可以不使用 router-link,在 e-menu 上面绑定 route 或者 :route = 'true' ,然后遍历的时候 :index=‘route.path' (:index=‘路径')。
代码
<template> <div class="menu"> <el-menu default-active='activePath' router @open='handleOpen' @close='handleClose' background-color='#545c64' text-color='#fff' active-text-color='#ffd04b' > <template v-for="(route,index) in routes"> <!-- 一级菜单 --> <el-menu-item :key='index' v-if='route.children && route.children.length== 1' :index='route.path'> <i :class="'el-icon-' + route.meta.icon"></i> <span>{{route.meta.title}}</span> </el-menu-item> <!-- 二级菜单 --> <el-submenu v-if='route.children && route.children.length > 1' :key='index' :index='route.path'> <template slot='title'> <i :class="'el-icon-' + route.meta.icon"></i> {{route.meta.title}} </template> <el-menu-item-group v-for='(item, index) in route.children'> <el-menu-item :key='index' :index='resolve(route.path, item.path)'> <i :class="'el-icon-' + item.meta.icon"></i> {{item.meta.title}} </el-menu-item> </el-menu-item-group> </el-submenu> </template> </el-menu> </div> </template> <script> export default { name: 'Menu', data() { return { activePath: this.$router.path, } }, computed: { // 计算属性:获取路由 routes() { console.log('test', this.$router) console.log('ddd', this.$router.options.routes) return this.$router.options.routes }, }, methods: { resolve(p,i){ return `${p}/${i}` }, handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } }, } </script> <style lang='less'> .el-menu { text-align: left; } </style>场景:使用 antd 的 Menu 时。
这个里面是需要使用route-link做路由跳转的。
代码
<template> <div class="menu"> <a-menu v-model="current" mode="inline" theme="dark"> <template v-for='route in routes'> <!-- 一级菜单 --> <a-menu-item v-if='route.children && route.children.length == 1' :key='route.path'> <router-link :to='route.path'> <a-icon :type='route.meta.icon' /> {{ route.meta.title }} </router-link> </a-menu-item> <!-- 二级菜单 --> <a-sub-menu v-else='route.children && route.children.length == 2' key="sub1"> <span slot="title"><span><a-icon :type='route.meta.icon' />{{ route.meta.title}}</span></span> <a-menu-item v-for='item in route.children' :key='item.path'> <router-link :to='resolve(route.path,item.path)'> <!-- <router-link :to="`${route.path}/${item.path}`"> --> <a-icon :type='item.meta.icon' /> {{ item.meta.title }} </router-link> </a-menu-item> </a-sub-menu> </template> </a-menu> </div> </template> <script> export default { name: 'Menu', data() { return { current: ['/'], } }, computed: { // 计算属性:获取路由 routes() { console.log('test', this.$router) console.log('ddd', this.$router.options.routes) return this.$router.options.routes }, }, methods:{ resolve(p,i){ return `${p}/${i}` }, }, } </script>以上这篇通过vue刷新左侧菜单栏操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]