码迷,mamicode.com
首页 > 移动开发 > 详细

[vue]模拟移动端三级路由

时间:2018-11-18 13:11:25      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:set   mod   代码   div   lin   inf   module   为什么   路由   

页面逻辑

技术分享图片

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟移动端三级路由</title>
</head>
<body>
<div id="app">

</div>

<template id="app01">
    <div>
        <h1>app01</h1>
        <router-link to="/home">home</router-link>
        <router-link to="/about">about</router-link>
        <router-view></router-view>
    </div>
</template>

<template id="home">
    <div>
        <h2>home</h2>
        <router-link to="/home/wenxue">文学</router-link>
        <router-link to="/home/lishi">历史</router-link>
        <router-view></router-view>
    </div>
</template>

<template id="about">
    <div>about</div>
</template>

<template id="wenxue">
    <div>wenxue</div>
</template>
<template id="lishi">
    <div>lishi</div>
</template>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let app01 = {
        name: "app01",
        template: '#app01'
    };

    let home = {
        name: "home",
        template: '#home'
    };

    let about = {
        name: "about",
        template: '#about'
    };
    let wenxue = {
        name: "wenxue",
        template: '#wenxue'
    };
    let lishi = {
        name: "lishi",
        template: '#lishi'
    };

    let routes = [
        {path: '/home', component: home},
        {path: '/home/wenxue', component: wenxue},
        {path: '/home/lishi', component: lishi},
        {path: '/about', component: about},
    ];
    let router = new VueRouter({
        routes
    });

    let vm = new Vue({
        el: '#app',
        render: c => c(app01),
        router
    })
</script>
</body>
</html>

问题: 为什么点了文学后, home里只有文学组件的内容了?

技术分享图片

技术分享图片
技术分享图片

[vue]模拟移动端三级路由

标签:set   mod   代码   div   lin   inf   module   为什么   路由   

原文地址:https://www.cnblogs.com/iiiiiher/p/9977546.html

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