其他分享
首页 > 其他分享> > Vue(十九)——内嵌网页的两种实现方式

Vue(十九)——内嵌网页的两种实现方式

作者:互联网

      (1)一种是使用router.js,在meta里面携带二级菜单的内容,在router里面直接做导航菜单和对应内容的一个映射,这样就不用将二级菜单的index传递给content了;

                 但是这种方式的问题在于,如果是从服务器传过来的菜单栏的内容,如何传递到router.js中给它填充到meta中呢?

          (2)第二种是将subMenu和menu-item不拆开,都写在subMenu中,这样click就有用了,同时也可以将子组件的index传递给父组件用于content的选择了。貌似这种方法更加简单。但是它的配置更加繁琐。首先在subMenu中要配置一遍二级标题,然后要在Basiclayout中配置一遍二级标题和内容组件的映射关系,在这里二级标题的index用了两次,需要打开两个文件配置。但是router的话二级标题或者其index只用了一次,而且只在一个文件中配置。如果路由很多的话,配置量是很大的。所以第二种方式可以尝试一下,但是最终还是要使用router.js的方式。有个小tips,:methods是v-mode的缩写,不是v-on的缩写。

子组件SiderMenue:

<template v-for="(subItem,subIndex) in item['subContent']" >
    <a-menu-item
            :key="'level1'+index+'level2'+subIndex"
            @click="changeView('level1'+index+'level2'+subIndex)"
    >
        <a-icon :type="subItem['icon']" ></a-icon>
        <span >{{subItem['content']}}</span>
    </a-menu-item>
</template>
export default {
    methods: {
       changeView:function(args) {
          this.$emit('selectView', args) //args要传的参数
        }
    },

---------------------------------------------------------------------------------------------------

父组件BasicLayout:

<a-layout-content style="margin: 24px 24px 0">
    <ChinaNetInfo v-show="select=='level10level20'"></ChinaNetInfo>

</a-layout-content>
export default {
    name:'BasicLayout',
    components: {
        ChinaNetInfo,
        siderMenue,
    },
    methods: {
        showSelect:function (args) {
            this.select=args;
        }
    },
    data() {
        return {
            collapsed: false,
            select:0,
        };
    },
};er

现在来试一下方法1,使用router的方法,其实这种方案又有两种解法:

(1)router的meta并不携带任何的导航栏信息,也就是说导航栏和展示页面的映射关系不通过meta来指定,而是使用<router-link to="path">中的path来映射:

         这种方法比较好就是不需要组件读取router.js中的route的信息,也不需要解析读取到的信息,从而不需要获得meta的信息来填充到导航栏里。

        比较方便。但是也需要跟方案2一样,将一个index传给父组件来实现展示页面的选择。优点在于传过去的index比较直观,是path,而不是上一个方案中丑陋而不直观的key值。这里好像也可以用到<router-view>,不知道上一个方案是否也可以用到<router-view>

(2)跟上述的方案1的解决方案是一样的,就不需要router-link了,但是要读取并解析router.js中的信息,有点麻烦。

读取router.js的信息非常简单,还需要分析一下小马的代码,为什么要写的那么复杂。

在需要使用routes信息的组件中,使用this.$router就可以了

SiderMenu.vue

-------------------------------

<template >
    <div>
        <a-menu mode="inline" theme="dark">
            <template  v-for="(item,index) in menuData">
                <a-sub-menu :key="'level1'+index" >
                    <span slot="title" >
                        <a-icon :type="item.meta['icon']" ></a-icon>
                        <span>{{item.meta['content']}}</span>
                    </span>
                    <template v-for="(subItem,subIndex) in item['children']">
                        <a-menu-item :key="'level1'+index+'level2'+subIndex">
                            <a-icon :type="subItem.meta['icon']" ></a-icon>
                            <router-link :to="{name:subItem.meta['content']}" tag="span">
                               {{subItem.meta['content']}}
                            </router-link>
                        </a-menu-item>
                    </template>
                </a-sub-menu>
            </template>
        </a-menu>
    </div>

</template>

<script>

    export default {
        name: "siderMenue",
        components:{
          },
        data() {
            return {
                menuData:this.$router.options.routes
            }
        },
    }
</script>

BasicLayout.vue

----------------------------------

<a-layout-content style="margin: 24px 24px 0">
    <router-view/>
</a-layout-content>

----------------------------------

router.js

-------------------------

import Vue from 'vue';
import Router from "vue-router";
import ChinaNetInfo from "@/components/ChinaNet_info";
import CN2_info from "@/components/CN2_info";

Vue.use(Router)

const router = new Router({
    mode: "history",
    routes: [
        {   name:"网络信息查询",
            path: '/网络信息查询',
            meta: { icon: "chrome", content: "网络数据查询系统" },
            component:{ render: h => h("router-view") },
            children:[
                {   name:'163信息查询',
                    path: '/163信息查询',
                    meta:{"icon":"pie-chart","content":"163信息查询"},
                    component: ChinaNetInfo },
                {   name:'CN2信息查询',
                    path: '/CN2信息查询',
                    meta: {"icon":"line-chart", "content":"CN2信息查询"},
                    component: CN2_info }
            ]
        },
        {   name:"流量预测",
            path: '/流量预测',
            meta: { icon: "book", content: "流量预测" },
            component:{ render: h => h("router-view") },
            children:[
                {   name:'163预测',
                    path: '/163预测',
                    meta: {"icon":"bar-chart","content":"163预测"},
                    component: ChinaNetInfo },
                {   name:'CN2预测',
                    path: '/CN2预测',
                    meta:{"icon":"area-chart", "content":"CN2预测"},
                    component: CN2_info }
            ]
        },
        {   name:"数字大屏",
            path: '/数字大屏',
            meta: { icon: "radar-chart", content: "数字大屏" },
            component:{ render: h => h("router-view") },
            children:[
                {   name:'163',
                    path: '/163',
                    meta: {"icon":"code-sandbox","content":"163数字大屏"},
                    component: ChinaNetInfo },
                {   name:'CN2',
                    path: '/CN2',
                    meta: {"icon":"gitlab", "content":"CN2数字大屏"},
                    component: CN2_info }
            ]
        },
    ]
})

export default router;

-----------------------

main.js

------------------------

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import "ant-design-vue/dist/antd.less";
import router from "./router";


Vue.config.productionTip = false
Vue.use(Antd)


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

---------------

menuData原始文件

---------------------

// menuData: [{"icon":"chrome","content":"网络信息查询",
//             "subContent":[{"icon":"pie-chart","content":"163信息查询"},
//                 {"icon":"line-chart", "content":"CN2信息查询"}]},
//            {"icon":"book","content":"流量预测",
//                "subContent":[{"icon":"bar-chart","content":"163预测"},
//                    {"icon":"area-chart", "content":"CN2预测"}]},
//             {"icon":"radar-chart","content":"数据大屏",
//                 "subContent":[{"icon":"code-sandbox","content":"163数字大屏"},
//                     {"icon":"gitlab", "content":"CN2数字大屏"}]}],

 

   

标签:内嵌,Vue,网页,content,163,meta,router,CN2,icon
来源: https://blog.csdn.net/sophiacan110/article/details/111588291