同一个页面设置不同的路由名称

简介: 同一个页面设置不同的路由名称

同一个页面设置不同的路由名称

描述

数据列表,点击新增和编辑跳到同一个页面,页面title需要显示新增或者编辑。

beforeRouteEnter

beforeRouteEnter是在组件内定义的路由导航守卫,使用方式:

 beforeRouterEnter(to,from,next){
   
    next((vm)=>{
   

    })
  },

是支持给next传递回调的唯一守卫,回调的参数vm是当前vue实例。

在组件创建时,不仅执行created钩子,同时也会执行beforeRouteEnter。那么,什么时候使用created,什么时候使用beforeRouteEnter?

1、触发的时机

只有组件在创建时,才会触发created。
每次进入路由时,都会触发beforeRouteEnter。
所以,当一个页面使用了keep-alive进行了缓存时,离开这个页面后再次进入时,不会再触发created,但是会触发beforeRouteEnter。
所以,beforeRouteEnter一般会配合keep-alive使用。

2、获取前一个路由的参数

beforeRouterEnter的参数中,可以获取到前一个路由的参数。

以上内容来自:
https://blog.csdn.net/longtengg1/article/details/125296833

解决

beforeRouteEnter(to, from, next) {
    if (to.query.isEdit == false) {
      to.meta.title = '新建'
    } else if (to.query.isEdit == true) {
      to.meta.title = '编辑'
    }
    next()
  },
目录
相关文章
|
7月前
|
Android开发
ExpandInfoAdapter实现二级列表显示转
ExpandInfoAdapter实现二级列表显示转
27 1
|
JavaScript
怎么点击下拉框外面关闭下拉框
怎么点击下拉框外面关闭下拉框
303 0
|
移动开发 JavaScript
同样的JS效果,有部分页面生效,有部分页面无效的原因(怪异模式)
同样的JS效果,有部分页面生效,有部分页面无效的原因(怪异模式)
95 0
|
JavaScript
fastadmin 自定义 按钮 动态切换数据 TAB切换
fastadmin 自定义 按钮 动态切换数据 TAB切换
294 0
ionic3 导航栏返回按钮事件设置 多级页面返回到指定的页面
ionic3 导航栏返回按钮事件设置 多级页面返回到指定的页面
129 0
|
JavaScript
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
437 0
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
|
iOS开发
iOS 二级页面返回一级页面导航栏错位bug解决方法
iOS 二级页面返回一级页面导航栏错位bug解决方法
805 0
|
前端开发
vue-router切换不同参数共用路由来显示页面的方法
遇到需要切换页面显示,重新请求接口但是前端路由不变时的一种处理方法
668 0