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

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

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

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

浏览器展示为:

vue router的嵌套使用与传值的query方式的更多相关文章
- vue程序中组件间的传值方式
vue程序在组件中进行传值有多种方式,这里记录我在项目中使用到的三种: 1. 父组件向子组件传值 2. 子组件向父组件传值 3. 通过路由传参 父组件通过props向子组件传值 在子组件script中 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue通信、传值的多种方式,详解
Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- vue router 几种方式对比 (转载)
<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导 ...
随机推荐
- springmvc maven idea 多模块开发(三):建立子模块
传统的多模块方式是建立domain.dao.service等,这种方式是按照软件架构进行分割,现在更多的应该是倾向按照功能来解耦,module前期可以配置成jar,后期也可以建立独有的页面,独立的站点 ...
- display:table的用法
目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出来的文件k数比用table写出来的要小 ...
- cesium结合geoserver实现地图空间查询(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- CentOS安装python3环境
CentOS7.4安装python3环境 (Python 3.8.1) (stable version, Dec.18, 2019) # .从官网下载Python - Dec. , [stable v ...
- appium server与nodeJs 兼容问题
在命令行模式下启动appium server时报错:error: uncaughtException: Cannot find module 'internal/util/types' 再来看看app ...
- Appium超详细环境搭建for Mac
兜兜转转试用了一圈自动化框架后,回归到appium,与一年之前相比,appium有了很大的改变:1.iOS 9 之前一直以 instruments 下的 UIAutomation为驱动底层技术(弊 ...
- VEH帮你定位程序崩溃地址
之前朋友有一个服务端程序,总是受到一些人的恶意漏洞攻击,没有源代码,只好反汇编修复了漏洞,并且使用WinLicense加保护授权. 漏洞总不是一次可以修复完的,恶意攻击并没有停止,然后加了WL保护程序 ...
- springcloud服务已经关闭但是Eureka显示服务状态一直为UP
问题: 最近遇到一个很奇怪的问题,就是使用springcloud的时候,服务明明已经停止,但是在eureka中一直显示此服务状态为UP,这样就导致了请求再次过来的时候被分发到已经停止的服务上,其实这是 ...
- css3元素如何扭曲、移位或旋转
css3 transform 兼容性:IE10+ transform:rotate(deg) 正数为顺时针,负数为逆时针 <!DOCTYPE html> <html lang=&qu ...
- ajax-属性、原理、实现html5进度条上传文件
一.远古ajax实现方式如下: 1.前端请求后台,后台设置返回 http状态码204 2.运用img图片(或css/javascript等)的加载机制,请求后台 3.post提交数据,运用iframe ...
