Vue vue-router中必不可少的redirect，meta和hidden三个属性

最新推荐文章于 2024-06-26 10:58:26 发布
最新推荐文章于 2024-06-26 10:58:26 发布
阅读量2.9w 收藏 50
点赞数 9
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43900414/article/details/110188544
版权
卿卿qing
关注
  • 9
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vite+vue3+ts中的vue-router基本配置
m0_51431448的博客
08-19 4929
加上ts其实就是多了类型的约束，vue-router中已经给我们提供了RouteRecordRaw类型，可能我们需要在路由对象中自定义配置属性的时候就得去扩展一下RouteRecordRaw类型了
vue-element-admin vue-router 动态路由 从服务器动态添加路由
rb8703的博客
06-17 3233
用户登录成功，通过用户角色从服务器获取路由，添加到vue-router中。 因为侧边栏存在路由嵌套，所以后端设计数据库时添加父路由id字段，递归获取所有路由数据 根据路由格式创建Router类和路由meta信息类RouterMeta 路由格式 Router类 public class Router{ /** id */ private String id; /** 路径 */ private String path; /** 装饰;使用哪个layout
vue router路由中hidden属性的作用
qq_45754184的博客
11-03 1887
hidden属性在项目中是作为一个判断该路由页面要不要在项目的菜单栏显示的标识，这里说的菜单栏就是我们常见的顶部菜单或者侧边栏菜单等。
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
主要介绍了在vue中实现某一些路由页面隐藏导航栏的功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用 Vue Router 的 meta 属性实现多种功能
最新发布
weixin_44107140的博客
06-26 1721
通过在 Vue Router 中使用 meta 属性，我们可以方便地实现多种功能，如设置页面标题、管理角色权限、控制页面过渡效果和缓存等。这不仅提高了代码的可维护性，还大大增强了应用的用户体验。希望这篇文章能帮助你更好地理解和使用 Vue Router 的 meta 属性。
VUE项目路由文件中hidden属性有什么作用
ButterPig
01-06 4356
vue router路由中hidden属性的作用
Vue meta属性 路由元信息前后配置守卫
技术前端，忠于热爱 @0.活在风浪里
01-03 1724
它可以切换不同页面显示不同的页面标题文字,也可以判断守卫放行的页面,下面一一解释 { path: '/', name: '', meta: { title: '后台管理主页', requiredPath: true, }, component: () =&gt
vue-router meta配置属性
热门推荐
juse__we的博客
10-10 1万+
https://router.vuejs.org/zh/guide/advanced/meta.html
Vue-vue-router（二）嵌套路由
refaker的博客
04-07 686
在vue-router（一）中已经提到过，路由匹配的组件将会渲染到<router-view></router-view>中 而在渲染的组件中，同样也可以嵌套路由用来渲染组件。 <div id="app"> <router-view></router-view> </div> const home = { template: '<div>this is home</div>' }; co
vue-router添加动态路由及无限刷新白屏和添加不生效问题_router(2)
2301_82244607的博客
04-29 755
else {== -1) {next()} else {next(beforeEac… // 一直循环下去… , 因为我们没有使用 next() 放行} else {next()}else{try {})next(} else {== -1) {next()} else {next(})})},routes() {})
Vue路由对象属性 .meta $route.matched详解
10-16
今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue vuex vue-rouert后台项目——权限路由（适合初学）
08-28
项目中有三个角色：adan、barbara 和 carrie，每个角色都有其对应的权限。 技术栈 本项目使用了以下技术栈： * webpack：打包神器 * vue：JavaScript 框架 * vuex：实现不同组件间的状态共享 * vue-router：页面...
vue-router各个属性的作用及用法
weixin_33975951的博客
08-25 733
vue-router是vue单页面开发的路由，就是决定页面跳转的！ <router-link> <router-link> 组件支持用户在具体有路由功能的应用中（点击）导航。通过to属性指定目标地址。 Props 属性 . to 表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()。 用法： <!--字符串--> ...
Vue-router中meta属性的用法
weixin_45687036的博客
02-28 1万+
Vue-router中meta属性的用法
vue.js----之router详解（三）
bansha1495的博客
01-13 268
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制 而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的 至于为什么要把a换成router-link原因还是有的，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），touter-link可以渲染为任何元素，这里可以直接渲染成li...
vue-router元信息meta
qinglanh的博客
06-16 944
meta:这个属性记录了你路由携带的一些信息，meta里面的属性，是自身定义并给他设置自身的规则的，比如说我在vue-router路由属性meta里面自定义一个title，那么在携带时候额外给title增加一些规则。而后我又针对这个title制定规则，制定如果bigTitle为true时，那么我跳转这个页面时会显示title里面的文字。创建这个title我想让他每跳转一个路由，也就是页面时，都让跳转后的页面显示我title里面的信息。
Vue meta属性 路由元信息前后配置守卫，web前端开发班
m0_60666921的博客
03-20 448
/ 在路由元信息配置守卫 requiredPath为true, 适合守卫多个页面 vue3next() 变成return true。组件级路由守卫 放在要守卫的组件里，除了全局是router.开头,其他是befor(没.)开头,跟data和methods同级。(img-x3Pn73Uk-1710895421306)](img-oh6tfmmE-1710895421306)]// 导航后置守卫(当你真正进入到某个页面之后才执行)// 导航后置守卫(当你真正进入到某个页面之后才执行)
关于vue-router中的路由元信息-------meta的应用
cao_peilei的博客
07-28 2124
vue路由中的路由元信息--------meta属性对象
vue-element-admin 三级路由缓存
03-26
在 vue-element-admin 中，可以通过配置路由 meta 中的 keepAlive 属性来进行缓存。但是对于三级路由缓存，需要将他们作为二级路由的子路由进行配置。 具体配置方式如下： 1. 在 router/index.js 中，将三级路由定义为二级路由的子路由，例如： ```javascript { path: '/system', component: Layout, redirect: '/system/menu', name: 'System', meta: { title: '系统管理', icon: 'example' }, children: [ { path: 'menu', name: 'Menu', component: () => import('@/views/system/menu'), meta: { title: '菜单管理', icon: 'table', keepAlive: true } }, { path: 'role', name: 'Role', component: () => import('@/views/system/role'), meta: { title: '角色管理', icon: 'tree', keepAlive: true } }, { path: 'user', name: 'User', component: () => import('@/views/system/user'), meta: { title: '用户管理', icon: 'user', keepAlive: true } }, { path: ':id', // 三级路由 name: 'EditUser', component: () => import('@/views/system/edit-user'), meta: { title: '编辑用户', icon: 'user', hidden: true } // 隐藏该路由 }, ] }, ``` 2. 在 src/layout/components/MultiTab下的index.vue中，监听路由变化，根据当前路由中的 fullPath 进行判断，如果是三级路由，则将 fullPath 的前缀作为 parentPath 保存下来，用于找到他的二级父路由，从而正确进行缓存。 ```javascript computed: { // 通过 fullPath 匹配出二级父路由名称 parentPath() { const { fullPath } = this.$route; const matched = this.$route.matched; if (matched && matched.length > 2) { const parentPath = `/${matched[1].path}`; return fullPath.replace(parentPath, '').split('/')[1]; } return ''; }, // 是否需要缓存 needKeepAlive() { const { meta } = this.$route; if (meta && (typeof meta.keepAlive !== 'undefined')) { return meta.keepAlive; } return false; } }, watch: { '$route': function(newVal, oldVal) { // 监听路由变化，判断是否需要缓存 if (this.needKeepAlive) { const fullPath = newVal.fullPath; if (fullPath !== oldVal.fullPath) { const parentPath = this.parentPath; if (parentPath) { this.cacheList.push(`${parentPath}/${fullPath}`); } else { this.cacheList.push(fullPath); } } this.$forceUpdate(); } } } ``` 3. 在 src/layout/components/MultiTab下的tab-list.vue中，根据传入的 cacheList 进行渲染路由缓存。 ```javascript <keep-alive> <router-view v-if="$route.meta.keepAlive" :key="$route.path" /> </keep-alive> <component v-else :is="currentRoute.component" :key="currentRoute.path" /> ... computed: { // 用于 keep-alive 的路由列表 keepAliaveList() { if (this.cacheList.length) { const keepAliveList = this.cacheList.map(item => { const matched = item.split('/'); if (matched.length > 2) { // 当前路由是三级路由，需要找到他的二级父路由 const parentPath = `/${matched[1]}`; const parentRoute = this.getRouteObjByName(parentPath); if (parentRoute) { return { ...this.getRouteObjByName(item), parent: parentRoute }; } } else { // 当前路由是二级路由，直接返回 return this.getRouteObjByName(item); } }).filter(item => item); return keepAliveList; } return []; } }, methods: { // 根据路由名称获取路由对象 getRouteObjByName(name) { const routes = this.$router.options.routes; const obj = routes.find(route => route.path === name); return obj; }, // 关闭所有缓存的标签页 closeAllTags() { this.cacheList = []; this.$store.dispatch('multiTab/resetTabs'); }, ... } ``` 通过这些配置，即可实现 vue-element-admin 的三级路由缓存功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值