多路由复用一个组件

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

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实现的页面:

实现方法

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

给 绑定一个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;
    },
},
原文链接:segmentfault.com

上一篇:knx.js
下一篇:jsmodbus

相关推荐

  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • 魔方实时通信一对一音视频组件

    魔方实时通信/协作引擎(Web SDK)是一个全能力的实时云端协作引擎 魔方实时通信,请点击这个(https://www.shixincube.com/) 继上一个im聊天组件增加了发动语音,语音...

    1 年前
  • 高阶组件之属性代理

    新组件类继承子React.component类,对传入的组件进行一系列操作,从而产生一个新的组件,达到增强组件的作用 操作props 访问ref 抽取state 封装组件 ...

    1 年前
  • 高阶组件HOC - 小试牛刀

    1. 前言 老毕曾经有过一句名言,叫作“国庆七天乐,Coding最快乐~”。所以在这漫漫七天长假,手痒了怎么办?于是乎,就有了接下来的内容。。。 2. 一个中心 今天要分享的内容有关高阶组件...

    2 年前
  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 高阶函数&amp;&amp;高阶组件

    高阶函数 特点: 接受函数类型的参数。 返回值是函数。 高阶函数具有可扩展性。 常见的高阶函数: 定时器 setTimeout(); setInterval() Promise(); 数组相关:...

    3 个月前
  • 高级 Angular 组件模式 (3b)

    03b Enhance Components with Directives 原文: Enhance Components with Directives(https://blog.angula...

    2 年前
  • 高级 Angular 组件模式 (3a)

    03a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components ...

    2 年前
  • 高品质 React UI 组件

    (https://img.javascriptcn.com/cca319311c2ea59a2b5cdaa63b997828)(https://link.funteas.com?target=http...

    2 年前
  • 项目能快速复用的vue-demo

    前言 今天是个好日子,大家六一快乐; vuecli生成的template还需要配置axios,vuex,element等插件,该项目中将这些常用插件进行了配置; 项目开发中template可...

    2 年前

官方社区

扫码加入 JavaScript 社区