多路由复用一个组件

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

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

相关文章
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
js获取数组的最后一个元素
在js里面如何获取一个数组的最后一个元素呢?这里总结了两种方法,有需要的朋友可以看看。 (1)js内置pop方法 pop() 方法用于删除并返回数组的最后一个元素,注意这里在获取了数组的最后一个元素的同时也将原数组的最后一个元素给删除了。如...
2017-03-22
jQuery给多个不同元素添加class样式的方法
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class &lt;!DOCTYPE html&gt;...
2017-03-22
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
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
基于javascript实现单选及多选的向右和向左移动实例
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下: 方法 一: &lt;body&gt; &lt;h1&gt;实现单选及多选的向右和向左移动&lt;&#x2F;h1&gt; &...
2017-03-27
angular.js 路由及页面传参示例
页面传参数方法:1、$rootScope。2、(url)/user/:name/:age。 页面转换方法:1、href=&quot;#/&quot; rel=“external nofollow” rel=“external nofollo...
2017-03-15
回到顶部