小结

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. Qt编写自定义控件1-汽车仪表盘

    前言 汽车仪表盘几乎是qt写仪表盘控件中最常见的,一般来说先要求美工做好设计图,然后设计效果图给到程序员,由程序员根据效果来实现,主要靠贴图,这种方法有个好处就是做出来的效果比较逼真,和真实效果图基本 ...

  2. CF 954H Path Counting

    H. Path Counting time limit per test 5 seconds memory limit per test 256 megabytes input standard in ...

  3. C++内存管理（转）

    C++内存管理 [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理 ...

  4. 关于web标准的一些想法

    关于web标准的一些想法 页面结构,表现,行为的关系.应该是各自分离又紧密联系的关系.从代码上分离出来.各自完成各自的功能,方便以后维护.紧密联系是指他们是相互依赖的.结构是核心,虽然从理论上讲不管什 ...

  5. F - Fibonacci again and again

    任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样定义的: F(1)=1; F(2)=2; F(n)=F(n-1)+F(n-2)(n>=3); 所以,1, ...

  6. 【转】asp.net项目在IE11下出现“__doPostBack”未定义的解决办法

    最近我们运营的网站有用户反馈在 IE 11 下<asp:LinkButton> 点击出现 "__doPostBack"未定义",经过一番google,终于知道 ...

  7. easyui---form表单_validatebox验证框

    第一种方式:混合写法 $("#password").validatebox({ }) <td><input type="text" name= ...

  8. FastDFS数据迁移

    参考:https://blog.csdn.net/frvxh/article/details/56293502 FastDFS安装配置参考:https://www.cnblogs.com/minseo ...

  9. CCPC-Wannafly Winter Camp Day4 G---置置置换【递推】【组合数】【逆元】

    置置置换 已经提交 已经通过 63.89% Total Submission:72 Total Accepted:46 题目描述 wlswlswls有一个整数nnn,他想请你算一下有多少1...n1. ...

  10. vue axios跨域请求，代理设置

    在config下的index.js中的dev下的 proxyTable{}中设置代理 proxyTable: { '/api': { target: 'http://10.0.100.7:8081', ...