电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue 在單頁面應用里使用二級套嵌路由

瀏覽:95日期:2022-10-17 17:27:24

在一個單頁面應用里使用二級套嵌路由

目錄結構如下:

vue 在單頁面應用里使用二級套嵌路由

其中main.js為全局配置文件,App.vue為項目入口。

main.js中路由配置如下

import Vue from ’vue’//引入vueimport App from ’./App’//引入主模板import Router from ’vue-router’// 引入router路由// 引入項目的模塊組件import licai from ’./components/licai’import home from ’./components/home’import wode from ’./components/wode’import home1 from ’./components/home/home1’import home2 from ’./components/home/home2’import home2_1 from ’./components/home/home2_box/home2_1’//套嵌路由import home2_2 from ’./components/home/home2_box/home2_2’ Vue.use(Router)// 使用router // 定義路由var routes = [{ path: ’/’, redirect: ’/home’ },//默認顯示home{ path: ’/home’, component: home,//路徑home的組件是home meta: { navShow: true}}, { path: ’/licai’, component: licai, meta: { navShow: true}}, { path: ’/wode’, component:wode, meta: { navShow: true}},{ path:’/home1/:num’, component:home1, meta: { navShow: false}},{ path:’/home2’, component:home2, meta: { navShow: false}, //這里定義了兩個子路由在home2模塊下 children:[ { path: ’/home2/home2_1’, component:home2_1}, { path: ’/home2/home2_2’, component:home2_2} ]}]// 實例化路由var vueRouter = new Router({ routes//此路由為上方定義})// 創建和掛載根實例new Vue({ el: ’#app’,//vue項目在哪個元素下 router: vueRouter,//使用路由 template: ’<App></App>’, components: { App }})

App.vue為主模板,也就是入口文件,其中定義的路由與一級路由無任何區別:

<template> <div id='app1'> <div v-show='$route.meta.navShow'> <!-- 引入公用的頭部 header組件 --> <v-header></v-header> </div> <div class='contianer'> <!-- 路由中的組件在這里被渲染,默認被渲染的為home組件,已在路由配置中設置 --> <router-view></router-view> </div> </div></template>

home.vue,這里是首頁,從這里可以進入home2頁面:

<template> <div class='home box'> <h3>這里是home頁面</h3> <router-link to='/home2'>套嵌路由</router-link></div></template>

home2.vue,這里可以展示套嵌路由了:

<template id='home2'> <div> <header class='home header'><a href='javascript:void(0);' rel='external nofollow' οnclick='javacript:window.history.go(-1)'><img src='http://www.hdgsjgj.cn/static/img/png1.png'/></a>路由套嵌</header> <router-link to='/home2/home2_1'>子頁面1</router-link> <router-link to='/home2/home2_2'>子頁面2</router-link> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div></template><style>.home.header{font-size:0.8rem;position:relative;}.home.header>a{display: block;height:0.8rem;width:0.4rem;margin-top:0.6rem;position:absolute;left:0.5rem;}.home.header>a>img{height:100%;width:100%;display:block;}</style>

效果:

vue 在單頁面應用里使用二級套嵌路由

以上就是vue 在單頁面應用里使用二級套嵌路由的詳細內容,更多關于vue 使用二級嵌套路由的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: 导电银胶_LED封装导电银胶_半导体封装导电胶厂家-上海腾烁 | 郑州外墙清洗_郑州玻璃幕墙清洗_郑州开荒保洁-河南三恒清洗服务有限公司 | 中矗模型-深圳中矗模型设计有限公司 | 板框压滤机-隔膜压滤机配件生产厂家-陕西华星佳洋装备制造有限公司 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 紧急切断阀_气动切断阀_不锈钢阀门_截止阀_球阀_蝶阀_闸阀-上海上兆阀门制造有限公司 | 电动不锈钢套筒阀-球面偏置气动钟阀-三通换向阀止回阀-永嘉鸿宇阀门有限公司 | 压力控制器,差压控制器,温度控制器,防爆压力控制器,防爆温度控制器,防爆差压控制器-常州天利智能控制股份有限公司 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 电子元器件呆滞料_元器件临期库存清仓尾料_尾料优选现货采购处理交易商城 | 温湿度记录纸_圆盘_横河记录纸|霍尼韦尔记录仪-广州汤米斯机电设备有限公司 | 精密钢管,冷拔精密无缝钢管,精密钢管厂,精密钢管制造厂家,精密钢管生产厂家,山东精密钢管厂家 | 螺旋丝杆升降机-SWL蜗轮-滚珠丝杆升降机厂家-山东明泰传动机械有限公司 | PTFE接头|聚四氟乙烯螺丝|阀门|薄膜|消解罐|聚四氟乙烯球-嘉兴市方圆氟塑制品有限公司 | 楼承板设备-楼承板成型机-免浇筑楼承板机器厂家-捡来 | 阜阳成人高考_阜阳成考报名时间_安徽省成人高考网 | 蓝鹏测控平台 - 智慧车间系统 - 车间生产数据采集与分析系统 | 魔方网-培训咨询服务平台| 耐磨陶瓷管道_除渣器厂家-淄博浩瀚陶瓷科技有限公司 | 全国国际化学校_国际高中招生_一站式升学择校服务-国际学校网 | 不锈钢复合板|钛复合板|金属复合板|南钢集团安徽金元素复合材料有限公司-官网 | 在线浊度仪_悬浮物污泥浓度计_超声波泥位计_污泥界面仪_泥水界面仪-无锡蓝拓仪表科技有限公司 | 陶瓷加热器,履带式加热器-吴江市兴达电热设备厂 | 新疆乌鲁木齐网站建设-乌鲁木齐网站制作设计-新疆远璨网络 | 门禁卡_智能IC卡_滴胶卡制作_硅胶腕带-卡立方rfid定制厂家 | led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 纯化水设备-纯水设备-超纯水设备-[大鹏水处理]纯水设备一站式服务商-东莞市大鹏水处理科技有限公司 | 1000帧高速摄像机|工业高速相机厂家|科天健光电技术 | 派财经_聚焦数字经济内容服务平台 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 井式炉-台车式回火炉-丹阳市电炉厂有限公司 | 天空彩票天下彩,天空彩天空彩票免费资料,天空彩票与你同行开奖,天下彩正版资料大全 | 电主轴,车床电磨头,变频制动电机-博山鸿达特种电机 | EDLC超级法拉电容器_LIC锂离子超级电容_超级电容模组_软包单体电容电池_轴向薄膜电力电容器_深圳佳名兴电容有限公司_JMX专注中高端品牌电容生产厂家 | 尊享蟹太太美味,大闸蟹礼卡|礼券|礼盒在线预订-蟹太太官网 | 大巴租车平台承接包车,通勤班车,巴士租赁业务 - 鸿鸣巴士 | 汽车润滑油厂家-机油/润滑油代理-高性能机油-领驰慧润滑科技(河北)有限公司 | 钢绞线万能材料试验机-全自动恒应力两用机-混凝土恒应力压力试验机-北京科达京威科技发展有限公司 | 森旺-A级防火板_石英纤维板_不燃抗菌板装饰板_医疗板 |