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