1. 程式人生 > >[vue]模擬移動端三級路由

[vue]模擬移動端三級路由

頁面 分享圖片 utf-8 out div app 內容 alt modules

頁面邏輯

技術分享圖片

實現代碼

<!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]模擬移動端三級路由