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 组件来导 ...
随机推荐
- Chrome Vue Devtools插件安装和使用
安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...
- Arm开发板+Qt学习之路
从2015.11.13日开始接触arm开发板,开始学习Qt,到现在已经四个月零17天了,从一个拿到开发板一无所知的小白,到现在能够在开发板上进行开发,有付出有收获. 之前一直没有时间将这个过程中的一些 ...
- 2000_wideband extension of telephone speech using a hidden Markov model
论文地址:基于隐马尔科夫模型的电话语音频带扩展 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/12151866.html 摘要 本文提出了一种从l ...
- 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...
- 网易MuMu模拟器不显示Menu(菜单)键的解决办法
解决方法一: 前提:需要一个键盘 步骤: 1.直接按下键盘上的Menu键. 解决方法二: 前提:需要Root之后的文件浏览器 步骤: 1.在文件管理器中打开 /System 文件夹: 2.复制 bui ...
- yum 程序包管理简介
rpm可以实现程序的快速,简单安装(跟编译安装比),但是rpm自己不能解决依赖,所以很多工具为了自动解决依赖应运而生,其中yum就是其中之一. yum解决依赖的办法: 必须有个文件服务器,里面放置所以 ...
- 【题解】 2月19日 厦门双十中学NOIP2014模拟D2 T1 采药人的切题规则
Made by 退役的OIer 第一次写博客,写得不好 or 不清楚的可以 在下方留言,我会尽量改进的! 好啦~~~回到正题,题面见传送门 [问题描述] 采药人最近在认真切题,但回旋的转盘时常在眼前浮 ...
- 【01】HTML_day01_02-认识HTML
typora-copy-images-to: media 第01阶段.前端基础.认识HTML 学习目标 理解 HTML的概念 HTML标签的分类 HTML标签的关系 HTML标签的语义化 应用 HTM ...
- 解决Spring Security自定义filter重复执行问题
今天做项目的时候,发现每次拦截器日志都会打两遍,很纳闷,怀疑是Filter被执行了两遍.结果debug之后发现还真是!记录一下这个神奇的BUG! 问题描述 项目中使用的是Spring-security ...
- mybatis配置---> mybatisConfig.xml 配置加接数据源
mybatisConfig.xml 配置主要作用是连接数据源配置的前提是在完成mybatis的jar包基础之上进行的同时要确保数据用户名和密码是否正确 一:密码写在 mybatisConfig.xml ...
