多路由复用一个组件

2019-05-16 admin

现在有两个路由,它们共用一个组件,如何实现组件的复用?

route代码:

export const catalogRouter: MenuConfig = {

path: "/catalog",
component: VisCatalog,
title: "目录管理",
key: "catalog",
name: "catalog",
children: [
{
    path: "catalogCreate",
    title: "目录添加",
    hasPermission: true,
    name: "VisCatalogCreate",
    key: "VisCatalogCreate",
    component: VisCatalogDetail,
},
{
    path: "catalogEdit",
    title: "目录编辑",
    hasPermission: true,
    name: "VisCatalogEdit",
    key: "VisCatalogEdit",
    component: VisCatalogDetail,
}],

}; 两个路由分别是 VisCatalogCreate 和 VisCatalogEdit,它们共用了一个组件 VisCatalogDetail。VisCatalogCreate实现的功能是目录的添加,VisCatalogEdit则是对目录信息的编辑,因为它们页面上的区别仅仅是显示数据的区别,所以可以共用一个组件。

VisCatalogCreate实现的页面:

图片描述

VisCatalogEdit实现的页面:

图片描述

实现方法

在页面中的 <router-view> 标签上绑定一个key属性,用来给它增加一个随机数,以此让每次进入<router-view>的路由名都不相同,这就让vue认为每次渲染的都是新组建,从而达到刷新的目的。

给<router-view> 绑定一个key属性

<router-view :key="key"></router-view>

在ts中,就需要对这个 key 实现随机数功能

computed: {
    key() {
        return this.$route.name !== undefined ? this.$route.name + new Date().getTime().toString() : this.$route + new Date().getTime().toString();
    },
},

key() 中返回的是三元表达式,在路由名不为 undefined 的时候,路由名等于它自己的后面加上个时间戳,new Date().getTime() 返回一个很长的随机数,这样拼接到一起就实现了路由名的随机。

既然是为了得到一个随机数,上面这个方法可以,但并不是我们常规做随机数的方法,所以也可以使用常规的random。

computed: {
    key() {
        const randomNumber = Math.random().toString();
        return this.$route.name !== undefined ? this.$route.name + randomNumber : this.$route + randomNumber;
    },
},

[转载]原文链接:https://segmentfault.com/a/1190000019195782

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65051.html

文章标题:多路由复用一个组件

相关文章
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
js获取数组的最后一个元素
在js里面如何获取一个数组的最后一个元素呢?这里总结了两种方法,有需要的朋友可以看看。 (1)js内置pop方法 pop() 方法用于删除并返回数组的最后一个元素,注意这里在获取了数组的最后一个元素的同时也将原数组的最后一个元素给删除了。如...
2017-03-22
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
jQuery给多个不同元素添加class样式的方法
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class &lt;!DOCTYPE html&gt;...
2017-03-22
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
自己参考两个仓库撸的通用的vue2.0+elementUI+多页面模板
A modern Vue.js multiple pages cli which uses Vue 2, Webpack3, and Element-UI Features Vue2 Webpack3 ElementUI Eslint(e...
2018-01-12
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: &lt;el-upload :action=&quot;uploadActionUrl&quot;&...
2018-03-18
回到顶部