小结

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. day_6.7 py tcp

    2018-6-7 09:20:34 #!/usr/bin/env python #!--*--coding:utf-8 --*-- #!@Time :2018/6/7 9:54 #!@Author T ...

  2. C - Building Fence

    Long long ago, there is a famous farmer named John. He owns a big farm and many cows. There are two ...

  3. layer弹窗插件自带自写经验

    复制可下载源代码和自写教程    链接: https://pan.baidu.com/s/1mhHa5Os 密码: j5su

  4. 文件二进制与String相互转换

    //转换base64 OpenFileDialog dialog = new OpenFileDialog(); //dialog.Filter = "所有文件(*.*)|*.*" ...

  5. ubuntu16.04使用Qt开发ROS

    本文介绍一种Qt下进行ROS开发的完美方案,使用的是ros-industrial的Levi-Armstrong在2015年12月开发的一个Qt插件ros_qtc_plugin,这个插件使得Qt“新建项 ...

  6. ros查看摄像头是否打开正常

    使用rqt_image_view命令,查看摄像头是否正常输出图像

  7. novnc安装教程

    适配于centos7 1.安装vncserver # stop selinux and iptables setenforce systemctl stop firewalld systemctl d ...

  8. ubuntu创建用户的两种方式

    ubuntu创建用户有两种方式: useradd和adduser 这两者,就像零件与产品的关系.useradd是DIY,需要自己调配,adduser是品牌机,拿来就能用. 对于创建一般用户来讲,use ...

  9. 关于Linux一些问题和答案

    1.怎样切换输入法? 2.怎样安装KDE? $sudo apt-get install kubuntu-desktop 3.安装KDE以后,怎样切回到默认的gnome? 注销,返回到登录界面,在“登录 ...

  10. 于dm-0 dm-1

    dm是device mapper的意思,dm-0, dm-1的实体可以通过下面几个命令看出,lvm会把每个lv连接到一个/dev/dm-x的设备档,这个设备档并不是一个真正的磁盘,所以不会有分区表存在 ...