vue路由嵌套（邹文丰）

Posted 2020-10-31 海川酷子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue路由嵌套（邹文丰）相关的知识，希望对你有一定的参考价值。

<!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路由嵌套（邹文丰）的主要内容，如果未能解决你的问题，请参考以下文章