标签：内嵌 Vue 网页 content 163 meta router CN2 icon
（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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。