嵌套路由
当我们不满足与 /home这种路由,而是希望通过 /home/news和/home/message访问一些内内容
那么就需要嵌套路由了 实现嵌套路由有两个步骤:
·创建对应的子组件,并且在路径映射中配置对应的子路由(注意:路由的定义也需嵌套)
      
        ·在组件内部使用<router-view>标签

      

      

    最后。在浏览器的地址栏就是这种形式了

  

query传值
  之前我们传值,是通过/user/3这种param形式。
  但是,当我们的需求发生变化,传的值的个数增加时,就需要用到query形式的传值了(/user?name=tom&age=3)

  ·定义传值

  

  ·接受传值(为什么这里用$route?因为route用的是当前路由对象)

浏览器展示为:

vue router的嵌套使用与传值的query方式的更多相关文章

  1. vue程序中组件间的传值方式

    vue程序在组件中进行传值有多种方式,这里记录我在项目中使用到的三种: 1. 父组件向子组件传值 2. 子组件向父组件传值 3. 通过路由传参 父组件通过props向子组件传值 在子组件script中 ...

  2. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  3. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  4. Vue通信、传值的多种方式,详解

    Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...

  5. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  6. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  7. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  8. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  9. vue router 几种方式对比 (转载)

    <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导 ...

随机推荐

  1. 卫星轨道相关笔记SGP4

    由卫星历书确定卫星轨道状态向量 卫星历书的表示方法有2种: TLE(Two Line Element),和轨道根数表示方法 由卫星历书计算出卫星轨道状态向量的方法有2种: SGP方法,NORAD的方法 ...

  2. 内网客户 通过 公网域名/ip 访问内网web服务器 出错

    在一内部局域网中, client  内网地址为 10.0.0.2     web  服务器内网地址为 10.0.0.1    外网地址为  211.6.15.1    域名为  xx.love.com ...

  3. linux 手工释放内存 高内存 内存回收 方法思路

    linux  跑的apache,apache工作模式有   Prefork.Worker和 Event  三种,分别是基于进程.线程.综合模式.        本文中使用的apache是 Event  ...

  4. Spring源码阅读笔记02:IOC基本概念

    上篇文章中我们介绍了准备Spring源码阅读环境的两种姿势,接下来,我们就要开始探寻这个著名框架背后的原理.Spring提供的最基本最底层的功能是bean容器,这其实是对IoC思想的应用,在学习Spr ...

  5. jsessionid與cookie關係的理解

    本地測試地址為http://localhost/TEST/login.jsf 當瀏覽器打開cookie時,瀏覽器第一次與服務器建立連接,會創建一個session,並生成一個id即jsessionid, ...

  6. 关于macos升级到catalina之后cisco无法使用的问题

    最近升级macos到最新的catalina系统,发现cisco的anyconnect用不了了,google了下,发现不是个例,mac提示联系软件开发者更新软件以兼容catalina,这就呵呵了. 于是 ...

  7. linux中vim常用操作

    三种模式 # 命令模式 vim 文件名 # 插入模式 按a/i/o 进行插入模式 按esc 重新进入命令模式 # 编辑模式 按:(冒号)进入编辑模式 插入命令 命令 作用 a 在光标所在字符后插入 A ...

  8. SVN状态图标不显示的解决办法

    第一步:检查设置 右键->TortoiseSVN->setting->Icon Overlays->Status cache->default/Shell.或者 右键-& ...

  9. mysql必知必会--使用数据处理函数

    函数 与其他大多数计算机语言一样,SQL支持利用函数来处理数据.函数 一般是在数据上执行的,它给数据的转换和处理提供了方便. 在前一章中用来去掉串尾空格的 RTrim() 就是一个函数的例子 函数没有 ...

  10. 算法训练 最大获利 注意数据规模(long long)

    资源限制 时间限制:1.0s   内存限制:256.0MB 问题描述 Chakra是一位年轻有为的企业家,最近他在进军餐饮行业.他在各地开拓市场,共买下了N个饭店.在初期的市场调研中,他将一天划分为M ...