嵌套路由
当我们不满足与 /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. linux中查看nginx、apache、php、mysql配置文件路径

    linux高效.稳定,但是也带来维护上的一些问题.配置文件究竟在哪里????? 如何在linux中查看nginx.apache.php.mysql配置文件路径了,如果你接收一个别人配置过的环境,但没留 ...

  2. 一键安装MySQL5.6.43脚本

    [root@lamp ~]# cat /server/scripts/mysql-5.6.43_install.sh #!/bin/bash #卸载系统自带的Mysql /bin/rpm -e $(/ ...

  3. Android Studio 3.6 正式版终于发布了

    Google 下载地址 百度云 下载地址 密码:epl9 如题,Android Studio 3.6 正式版终于发布了,值得兴奋呀,毕竟 3.5 大版本更新也已经差不多半年了,撒花撒花!这次更新又更新 ...

  4. centos7使用MySQL的Yum存储库安装mysql5.6.45

    注意:这个MySQL5.6.45版本有问题,修改配置文件不生效,推荐安装MySQL5.6.43 下载yum源 官网地址:http://dev.mysql.com/downloads/repo/yum/ ...

  5. GNU make doc - 6.6 追加变量值

    有时我们需要对已经定义过的变量进行追加,可以使用+=进行这一操作,就像下面这样 objects += another.o 该语句取objects变量的值,并在其后追加another.o(结果会在原变量 ...

  6. App 抓包提示网络异常怎么破?

    背景 当你测试App的时候,想要通过Fiddler/Charles等工具抓包看下https请求的数据情况,发现大部分的App都提示网络异常/无数据等等信息.以"贝壳找房"为例: F ...

  7. nginx 正向代理与反向代理

    一.介绍 反向代理:让Internet上的用户可以访问局域网内的资源,中间设置一个代理服务器,如下所示,红色圈是指局域网内的站点(myweb站点是我们的站点,例如iis).箭头不能反过来 正向代理:客 ...

  8. 【mysql】索引相关的个人总结

    重点参考: MySQL索引原理及慢查询优化 (美团技术分享网站):原理.示例优化都写的很好. 索引很难么?带你从头到尾捋一遍MySQL索引结构,不信你学不会!:原理写的很好. [从入门到入土]令人脱发 ...

  9. css的核心原理分为优先级原则与继承原则两大部分

    css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...

  10. redis集群&elasticSearch的认识

    elasticSearch_day01 1. Redis集群 1.1 什么叫集群 多台服务器集中在一起,实现同一业务 1.2 为什么集群 一台服务器不够,需要多台服务器支持,解决高并发,集群往往伴随分 ...