vue router动态路由下让每个子路由都是独立组件的解决方案


Posted in Javascript onApril 24, 2018

vue-router 之动态路由

vue-router官网上面是这样说的
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
然后,我就这样写了:
this.$router.push({path:'manage', query: {id: 'tasklist'}})1
结果很明显,失败了。然后我就默默的再次看了一下官网,结果发现了这句话
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', params: { plan: 'private' }})
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
谨记啊,动态实现二级路由,需要先用变量保存二级路由名称(let router = 'tasklist'),然后调用this.$router.push({path: `/user/${router}`}).

下面看下vue router动态路由下让每个子路由都是独立组件的解决方案

因为 vue-router 对嵌套路由采用的是组件复用策略,这在大部分场景的确是高效的做法,但是如果遇到这种情况:

vue router动态路由下让每个子路由都是独立组件的解决方案

就是要求多个子路由共活,并且有频繁来回切换需求的话,就很希望能让每个子路由都是独立组件了,虽然可以通过监听路由切换

watch: {
   '$route'(to) {
    if (to.meta.path === '/page/buy-details') {
     this.id = to.params.id;
     this.state()
    }
   }
  },

去实时处理更新的数据,我之前一直都是这么做的,包括上面那副动图的页面,但是这真的很麻烦,要让用户切换中准确的回到切换前页面的显示状态,要考虑的东西太多,于是想出了一个解决方案:

子路由组件不涉及实际业务代码,只维护一个打开过的id列表,路由切换到这边时,判断id,没打开过的添加,通过这个列表循环出实际的子路由组件,v-show当前id的,这样就能实现每个实例都是独立的了
我按这个思路写出一个 mixins

details-page.js

export default {
 watch: {
  '$route'(to, from) {
   this.detailsLeave(from);
   this.detailsOpen(to);
  }
 },
 data() {
  return {
   pagePath: '',
   pageId: 0,
   pages: {}
  }
 },
 methods: {
  /**
   * 子页面打开触发
   * @param route
   */
  detailsOpen(route) {
   if (this.detailsPathGet(route.path) === this.pagePath) {
    if (!this.pages[route.params.id]) {
     this.$set(this.pages, route.params.id, {
      id: route.params.id,
      scrollTop: 0
     })
    }
    //路由打开 跳转滚动条
    this.pageId = route.params.id;
    this.$nextTick(()=>{
     this.$parent.$el.firstChild.scrollTop = this.pages[route.params.id].scrollTop;
    });
   }
  },
  /**
   * 路由切换触发
   * 判断离开的路由是否是当前页面,如果是则记录滚动条高度
   * @param route
   */
  detailsLeave(route) {
   if (this.detailsPathGet(route.path) === this.pagePath) {
    if (this.pages[route.params.id]) {
     //记录滚动条高度 此处针对ea-admin后台 不同的框架要记录的滚动条el不同
     this.pages[route.params.id].scrollTop = this.$parent.$el.firstChild.scrollTop ;
    }
   }
  },
  /**
   * 子页面关闭函数
   * @param id
   */
  detailsClose(id) {
   delete this.pages[id]
  },
  /**
   * 取路由不含最后一项参数的地址
   * @param path
   * @returns {string}
   */
  detailsPathGet(path) {
   const i = path.lastIndexOf('/');
   return path.substr(0, i);
  }
 },
 mounted() {
  //通过当前路由地址创建页面识别地址 注:只对path: '/user/:id' 有效 当 path: /user/:id/profile 失效
  this.pagePath = this.detailsPathGet(this.$route.path);
  //执行第一次子页面打开
  this.detailsOpen(this.$route);
  //监听标签关闭消息 此处针对ea-admin后台 不同框架监听关闭方式不同
  this.$tabs.onRemove((page, next) => {
   //收到标签关闭回调,判断关闭的是否是当前页面
   if (page._path === this.pagePath) {
    //触发子页面删除
    this.detailsClose(page.id)
   }
   next()
  })
 }
}

Details.vue

<template>
 <div>
  <your-component
    v-for="item in pages"
    :id="item.id"
    :key="item.id"
    v-show="item.id === pageId">
  </your-component>
 </div>
</template>
<script>
 import YourComponent from '';
 import detailsPage from '../mixins/details-page'
 export default {
  name: 'DetailsPage',
  components: {YourComponent},
  mixins: [detailsPage],
 }
</script>

这样子组件可以只专注处理自己的固定数据,因为组件唯一,不用再去烦恼为每个id存储视图状态了。

总结

以上所述是小编给大家介绍的vue router动态路由下让每个子路由都是独立组件的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
javascript一点特殊用法
May 28 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 #Javascript
js 图片转base64的方式(两种)
Apr 24 #Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 #Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 #Javascript
You might like
如何使用脚本模仿登陆过程
2006/11/22 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python模拟事件触发机制详解
2018/01/19 Python
Python中的pack和unpack的使用
2018/03/12 Python
python多线程同步之文件读写控制
2021/02/25 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
学雷锋宣传标语
2014/06/25 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
学子宴致辞大全
2015/07/27 职场文书
八年级英语教学反思
2016/02/15 职场文书
z-index不起作用
2021/03/31 HTML / CSS
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android