[vue]模拟移动端三级路由: router-link位置体现router的灵活性

小结

router-link可以随便放

router-view显示的是父组件的直接子组件的内容

想研究下移动三级路由的逻辑, 即 router-link和router-view

点首页--点新闻资讯(新闻资讯列表)--点某一条新闻--新闻详情

有点迷糊了. 为何router可以这样.

简单模拟效果

app01
    home
        wenxue
        lishi
    about

app01
    home
    wenxue
    lishi
    about

点首页显示app01的内容

点home显示home组件的内容(追加: 因为home是app01的子组件)

点文学发现home组件没了, 转而代之的是webxue组件直接挂到了app01下(发现不是追加了)

这里有点想不明白.

什么情况会更替组件(router-view)内容? 地位相等

app01
    home
    about

点home显示home组件

点about显示about组件

因此我想到他们的地位相等

router不是

home:
  app01
    app001
    app002
  app02

而是

home:
  app01
  app001
  app002
  app02

挂靠4个同等地位的组件到home根组件下

可以这样写(给人误感觉是子组件的关系)

    let routes = [
        {path: '/app01', component: app01},
        {path: '/app01/app001', component: app001},
        {path: '/app01/app001', component: app002},
        {path: '/app02', component: app02},
    ];

本质和这样写没区别

    let routes = [
        {path: '/app01', component: app01},
        {path: '/z1', component: app001},
        {path: '/z2', component: app002},
        {path: '/app02', component: app02},
    ];

router-link可以随便放, router-view只能放在自己的根上

home
  app01
  app02

  router-view必须放在home上(即它们是home的子组件)

home
  app01
  app001
  app001
  app02

  router-view必须放在home上(即它们是home的子组件)

router-link体现了router的灵活性,可以随便放

demo代码

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

</div>

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

<template id="app01">
    <div>
        <h1>app01</h1>
        <router-link to="/z1">app001</router-link>
        <router-link to="/z2">app002</router-link>

    </div>
</template>

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

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


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

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

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

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

    let routes = [
        {path: '/app01', component: app01},
        {path: '/z1', component: app001},
        {path: '/z2', component: app002},
        {path: '/app02', component: app02},
    ];

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