小结

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>

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

  1. Vue 中的Vue Router一级路由，二级路由，三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  2. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  3. vue项目1-pizza点餐系统4-二级、三级路由

    一.目标样式 二.二级路由 在“关于我们”(about)下面设置二级路由. 1.创建组件,在router文件夹中index.js中先导入组件,配置好路由的访问地址,名称. //二级路由 import ...

  4. vue三级路由显示+面包屑

    问题一:如何让三级路由内容显示显示在一级路由页面 可以说是我点级二级路由导航的时候是不发生跳转的,但还要去动态的生成面包屑 const routes = [{ path: '/', name: 'Ho ...

  5. Vue.js 服务端渲染业务入门实践

    作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...

  6. vue（17）vue-route路由管理的安装与配置

    介绍 Vue Router 是 Vue.js官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参 ...

  7. Vue：（三）路由

    (一)基础介绍 vue-router用来构建SPA <router-link></router-link>或者this.$router.push({path:' '}) < ...

  8. Vue（SPA） WebPack模块化打包、SEO优化（Vue SSR服务端同构直出）、全浏览器兼容完整解决方案

    白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...

  9. 基于vue的移动端web音乐播放器

    声明 以下只是学习完慕课网huangyi老师实战视频课程的笔记内容,仅供个人参考学习使用.如果对Vue2.0实战高级-开发移动端音乐WebApp感兴趣的话,请移步这里:https://coding.i ...

随机推荐

  1. 腾讯云Badjs镜像使用入门

    版权声明:本文由王少飞 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/498929001487125840 来源:腾云阁  ...

  2. iOS - 开发中加载本地word/pdf文档说明

    最近项目中要加载一个本地的word/pdf等文件比如<用户隐私政策><用户注册说明>,有两种方法加载 > 用QLPreviewController控制器实现 步骤 : & ...

  3. windows下搭建docker

    1.下载,双击安装,然后一路next 2.启动,然后打开docker的settings 在shared drives里勾选你想要把项目存放的盘,点击Apply(这里在windows系统下有个坑,项目只 ...

  4. Diagnostics: File file:/tmp/spark-***/__spark_libs__***.zip does not exist

    Diagnostics: File file:/tmp/spark-c03df206-c90e-4c97-a2d6-a5d3fdb17811/__spark_libs__303213348409500 ...

  5. elasticsearch与solr区别

    solr:优点1.Solr有一个更大.更成熟的用户.开发和贡献者社区.2.支持添加多种格式的索引,如:HTML.PDF.微软 Office 系列软件格式以及 JSON.XML.CSV 等纯文本格式.3 ...

  6. 洛谷P1042 乒乓球【模拟】

    题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中111111分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华就是其中一位 ...

  7. .NET Core类库项目中如何读取appsettings.json中的配置

    这是一位朋友问我的问题,写篇随笔回答一下.有2种方法,一种叫丑陋的方法 —— IConfiguration ,一种叫优雅的方法 —— IOptions . 1)先看丑陋的方法 比如在 RedisCli ...

  8. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  9. 队列 Queue JoinableQueue

    from multiprocessing import Process, Queue def f1(q); for  i   in range(10): q.put(i) def f2(q): whl ...

  10. [No0000163]卷福、神秘博士和一群老戏骨表演群口相声：To be or not to be该咋念，简直高潮迭起

        'To be or not to be, that is the question',<哈姆雷特>中这句经典台词到底应该怎么念? 这是古今无数哈姆雷特演员最爱琢磨的问题,一千个人就 ...