首页 > 其他分享 >vue-router addRoute将子路由添加到指定路由下

vue-router addRoute将子路由添加到指定路由下

时间:2023-08-06 23:13:21浏览次数:39  
标签:将子 vue false resolve addRoute router 路由 layout

router.addRoute()可以向vue路由中动态的添加路由信息,但,路由存在多层级关系,例如,最开始的路由是这样的:

{
    path: '/',
    name: 'layout',
    component: resolve => require(['../layout'], resolve),
    meta: {
        title: '',
        handleStatus: 2
    },
    children: [
        //用户信息
        {
            path: '/memberInfo-index',
            component: resolve => require(['../views/memberInfo/index'], resolve),
            meta: {
                title: '欢迎页',
                handleStatus: 3,
                mainTitle: 1,
                memberInfo: true,
                permission: false,
                isMyFileEnabled: false
            }
        },
   ]
}

若,想在name为layout的这个路由下加一条子路由,可以这样实现

import router from "./router";
import theCollaborativeroup from "@/views/workingplatform/the-collaborative-group/index";
router.addRoute(
    "layout",
    {
        path: '/group',
        component: theCollaborativeGroup,
        meta: {
            title: "协同组",
            handlestatus: 9,
            mainTitle: 2,
            permission: false,
            isTaskGroupEnabled: false
       }
   }
)

addRoute的第一个参数接收一个字符串,就是告诉它要插入到那个路由(要写name属性)

标签:将子,vue,false,resolve,addRoute,router,路由,layout
From: https://www.cnblogs.com/pwindy/p/17610310.html

相关文章

  • 【8.0】Vue之ref属性
    【ref属性】ref属性,vue提供的,写在标签上可以写在普通标签:在vue中使用this.$refs.名字拿到dom对象,可以原生操作可以写在组件上:在vue中使用this.$refs.名字拿到[组件]对象,组件属性,方法直接使用即可【详解】ref属性是Vue.js中提供的一种特殊属性,它可以用于在标签上......
  • 【9.0】Vue之项目规范
    【一】vue-cli创建项目【1】引入单页面应用(SPA)单页面应用(SinglePageApplication,简称SPA)是一种Web应用程序的架构方式。传统的多页面应用中,每次导航到新页面都会进行整个页面的重新加载。而SPA只有一个主页面(通常是index.html),页面的内容通过动态渲染来更新,不会重新加载整......
  • 【七】Vue之Vue-cli
    【一】Vue-CLI项目搭建【二】Vue-CLI项目搭建参考步骤Vue-CLI(VueCommandLineInterface)是Vue.js官方提供的一个基于命令行的快速搭建Vue项目的工具。它为我们创建一个Vue项目提供了简单易用的脚手架。【1】安装Node.js:首先需要安装Node.js,因为Vue-CLI是基于Node.js运......
  • 【十】Vue之高级
    【一】ref属性【1】详解被用来给元素或子组件注册引用信息(id的替代者)应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)在Vue中,$refs是一个特殊的属性,用于给元素或子组件注册引用信息。它允许我们在模板或组件中通过引用名称来访问对应的DOM元素或......
  • 【十一】Vue之Vue3
    【一】Vue3的变化【1】性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%【2】源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking【3】拥抱TypeScriptVue3可以更好的支持TypeScript【4】新的特性Composition......
  • 【3.0】Vue之语法
    【一】插值语法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--Vue文件--><scriptsrc="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vu......
  • 【2.0】Vue之引入
    【一】Vue介绍Vue(读音/vjuː/,类似于view)是一个渐进式JavaScript框架,用于构建用户界面。它与其他大型框架的不同之处在于,Vue的设计理念是可以逐层应用的。Vue的核心库只关注视图层,这使得它不仅易于上手,还方便与第三方库或已有项目进行整合。Vue采用了M-V-VM(Model......
  • 【4.0】Vue之指令系统
    【一】指令系统之文本指令(v-text/v-html)写在标签上,v-开头的标签,称之为指令,每个指令都有特殊用途v-指令名='写原来插值能写的东西'v-指令名='name'#变量v-textv-text指令用于将变量的值渲染到标签的内部。它会将变量的值作为纯文本内容输出到标签之间,而不会将......
  • 【7.0】Vue之组件
    【一】组件介绍【1】什么是组件组件就是:扩展HTML元素,封装可重用的代码,目的是复用例如:有一个轮播图,可以在很多页面中使用,一个轮播有js,css,html组件把js,css,html放到一起,有逻辑,有样式,有html组件是在Web开发中常用的一种技术方式,它可以将页面上的不同部分进行封装,形成......
  • 【6.0】Vue之生命周期函数
    【一】Vue的生命周期【1】详解Vue.js生命周期是指在Vue实例从创建到销毁的过程中,会经历一系列的钩子函数,这些钩子函数可以让我们在不同的阶段插入自定义的代码。Vue的生命周期分为三个主要阶段:创建阶段更新阶段销毁阶段。(1)创建阶段beforeCreate:在实例初始化之后,......