zoukankan      html  css  js  c++  java
  • Vue 动态获取组件与动态路由获取组件

    一、动态获取模板

    1. 给变量 showView 赋值一个模板

    2. 页面通过 :is 关键字引入模板

    showView.value = require(`@/views/antv/x6/${item.key}/index.vue`).default;

    <a-col :xs="16" :sm="17" :md="18" :lg="19" :xl="20" class="d-flex">
      <a-card class="flex d-flex">
        <component
          :is="showView"
          class="shadow-6"
        ></component>
      </a-card>
    </a-col>

    二、动态获取路由

    1. 后台获取菜单数据

    2. 根据数据内指定的模板路径,给菜单 component 属性动态关联模板

    route.component = () => require(`@/${route.cdlj}`).default
        'permissions': [
            {
              path: '/',
              name: 'index',
              cdlj:'layouts/BasicLayout',
              meta: { title: '123' },
              redirect: '/N01',
              children: [
                {
                  path: '/N01',
                  name: 'dbsy',
                  cdlj:  'views/dbsy/DBSY',
                  meta: { title: '待办事宜', permission: ['app'] },
                },
              ]
            }
          ]
  • 相关阅读:
    textarea输入字符有限制
    linux 简单命令
    jQuery animate()
    两张图切换
    表单验证 靠name获取
    jquery验证手机号码
    倒计时
    锚点链接 阻止a标签跳转
    滚动监听: bootstrap 的scrollspy
    MySQL 02
  • 原文地址:https://www.cnblogs.com/ghostnet/p/15157148.html
Copyright © 2011-2022 走看看