码迷,mamicode.com
首页 > 其他好文 > 详细

vue路由嵌套(邹文丰)

时间:2018-04-14 13:49:58      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:微服务   子模块   tps   doc   tle   https   pat   title   背景   

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/qz">求职意向</router-link>
<router-link to="/jn">技能特长</router-link>
<router-link to="/gz">工作经验</router-link>
<router-link to="/zw">自我评价</router-link>
<router-link to="/jy">教育背景</router-link>
</p>
<router-view></router-view>
</div>

<template id="yiXiang">
<div>求职意向</div>
</template>
<template id="jiNeng">
<div>技能特长</div>
</template>
<template id="gongZuo">
<div>
<router-link to="/gz/qzSon">云贷通</router-link>
<router-link to="/gz/jnSon">有数简查</router-link>
<router-link to="/gz/gzSon">最多跑一次</router-link>
<router-link to="/gz/zwSon">接口微服务</router-link>
<router-view></router-view>
</div>
</template>
<template id="ziWo">
<div>自我评价</div>
</template>
<template id="jiaoYu">
<div>教育背景</div>
</template>

<!--路由子模块-->
<template id="gongZuo1">
<div>《2323》</div>
</template>
<template id="gongZuo2">
<div>《2434》</div>
</template>
<template id="gongZuo3">
<div>《45454》</div>
</template>
<template id="gongZuo4">
<div>《6767676》</div>
</template>
<script>
const yiXiang = { template: ‘#yiXiang‘};
const jiNeng = { template: ‘#jiNeng‘};
const gongZuo = { template: ‘#gongZuo‘};

const ziWo = { template: ‘#ziWo‘};
const jiaoYu = { template: ‘#jiaoYu‘};

const jiaoYuSon1 = { template: ‘#gongZuo1‘};
const jiaoYuSon2 = { template: ‘#gongZuo2‘};
const jiaoYuSon3 = { template: ‘#gongZuo3‘};
const jiaoYuSon4 = { template: ‘#gongZuo4‘};

const router = new VueRouter({
routes:[
{path:‘‘,component:yiXiang},
{ path: ‘/qz‘, component: yiXiang},
{ path: ‘/jn‘, component: jiNeng},
{ path: ‘/gz‘, component: gongZuo,
children: [
{ path: "/", component: jiaoYuSon1 },
{ path: "qzSon", component: jiaoYuSon1 },
{ path: "jnSon", component: jiaoYuSon2 },
{ path: "gzSon", component: jiaoYuSon3 },
{ path: "zwSon", component: jiaoYuSon4 }
]
},
{ path: ‘/zw‘, component: ziWo},
{ path: ‘/jy‘, component: jiaoYu}
]
});
const app = new Vue({
router
}).$mount(‘#app‘)

</script>
</body>
</html>

vue路由嵌套(邹文丰)

标签:微服务   子模块   tps   doc   tle   https   pat   title   背景   

原文地址:https://www.cnblogs.com/zou1234/p/8831084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!