<!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>
原文地址：https://www.cnblogs.com/zou1234/p/8831084.html
时间： 2024-11-02 06:04:23