嵌套路由
当我们不满足与 /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. raid知识梳理及其详细介绍

    1 raid级别 生产环境常用到的raid级别有raid0,raid1,raid5,raid10.所以侧重学习这几种raid级别即可. 1.1 raid0条带卷 raid0示意图: raid0特点介绍 ...

  2. 一个故事看懂Linux文件权限管理

    前情回顾: 我通过open这个系统调用虫洞来到了内核空间,又在老爷爷的指点下来到了sys_open的地盘,即将开始打开文件的工作. 详情参见:内核地址空间大冒险:系统调用 open系统调用链 我是一个 ...

  3. Nginx是什么 ? 能干嘛 ?

    学习博客:https://blog.csdn.net/forezp/article/details/87887507 学习博客:https://blog.csdn.net/qq_29677867/ar ...

  4. nCompass-网络流量基础知识

    nCompass-网络流量基础知识 1.  流量分析基础知识 1.1  常见的流量分析方式: SNMP: 网管平台通过主动式获取设备接口流量信息. Flow:网络设备将穿越的数据流信息精简压缩打包. ...

  5. 一起了解 .Net Foundation 项目 No.6

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. .NET Micro Fr ...

  6. pikachu-不安全的文件下载和上传

    一.文件下载漏洞 1.1 概述     很多网站都会提供文件下载的功能,即用户可以通过点击下载链接,下载到链接所对应的文件.但是,如果文件下载功能设计不当,则可能导致攻击者可以通过构造文件路径,从而获 ...

  7. 【查阅】Chrome快捷键

    高频简要Chrome快捷键整理 记录一下Chrome常用快捷键方便查询熟悉,提高工作效率. 在我认为比较高频有用的快捷键,会加粗和标记. 在日常中熟练使用快捷键能帮助我们提高工作效率. 一 .F区单键 ...

  8. rabbitmq安装(ubuntu)

    本文大量复制自:https://blog.csdn.net/qq_22638399/article/details/81704372 # 安装erlang apt-get install erlang ...

  9. 浅析 .NET 中 AsyncLocal 的实现原理

    目录 前言 1.线程本地存储 2.AsyncLocal 实现 2.1.主体 AsyncLocal<T> 2.2.AsyncLocal<T> 在 ExecutionContext ...

  10. vue及vant框架,多语言配置

    1.安装 vue-i18n,( cnpm install vue-i18n --save ) 2.在入口,main.js 中引入 (import Vuei18n from "vue-i18n ...