小结

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. 【转载】技巧：Vim 的纵向编辑模式

    如果要我选一个Vim中让我觉得Life Changing功能的话,我一定会选Vim的块编辑功能,也就是Ctrl+V,虽然还有些别的编辑器也有这功能,但目前为止,我从中受益颇大 原文地址:技巧:Vim ...

  2. maven子项目的springboot配置

    正常来说一个maven子项目的parent是父项目,而不是直接继承,这时候就需要改下配置 默认生成的代码入下: <?xml version="1.0" encoding=&q ...

  3. 2. Mysql数据库的入门知识

    2. Mysql数据库的入门知识 (1)打开Windows系统提供的服务查看相应的服务. (2)在Windows任务管理器的进程中查看 (3)使用命令行管理windows的Mysql数据库服务. Ne ...

  4. twisted 学习笔记一：事件循环

    from twisted.internet import reactor import time def printTime(): print "Current time is", ...

  5. css sprite---css精灵网页图片应用处理方式分析

    CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页 ...

  6. python3 的 mysql 简单操作

    一.python 提供的 db 接口 pymysql 两个基本对象: connection.cursor 连接示例 # connect_demo.py import pymysql db = pymy ...

  7. 8月10日CSS总结

    1.三角形光标转换 CSS: .one{ width: 0;­­ height: 0; border-top: 100px solid #000; border-right:100px solid t ...

  8. 关于ICO的一些理解

    第一次看到ICO,估计很多人都处于懵逼的状态,感觉很抽象. 提到IOC可能想到的下一个词语就是DI IOC:控制反转 DI:依赖注入 那么什么是控制反转呢? 我以前对这个概念也很模糊,最近在知乎上看到 ...

  9. [No0000173]97 条 Linux 常用命令总结

    1.ls [选项] [目录名 | 列出相关目录下的所有目录和文件 -a  列出包括.a开头的隐藏文件的所有文件-A  通-a,但不列出"."和".."-l  列 ...

  10. 一个按成绩排序SQL的写法问题

    测试数据: SQL> select * from sscore; NAME       SCORE ---------- ----- aa            99 bb            ...