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 组件来导 ...
随机推荐
- 【笔记】Git简明教程
前言 Git这个东西我曾经有学过,但学的内容太多了,有点懵,不太理解,磕磕碰碰的,走了不少弯路.不过最近我在B站上发现了一个讲的很好的教程:<表严肃讲Git>.因此,我决定用文字的方式分享 ...
- PHP 安装扩展步骤
一般来说php安装扩展需要几下几个步骤 1.下载扩展包 比如 pdo_mysql.tar.gz (如果不想下载,可以到php安装目录,(类似php-5.3.3/ext/)的ext文件中找 ...
- 安利自己写的easy-clipboard库
概述 clipboard.js 是一个非常好用的剪切板插件,但是随着前端框架的演变,用户与网页交互的方式越来越多,不仅限于点击事件了,并且在很多情况下,我们可能不需要它强制性自带的点击事件,所以我打算 ...
- axios中qs的使用
首先qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 地址: https://www.npmjs.com/package/qs qs.parse().qs.string ...
- Vue与React的区别
对已经了解的内容,做几点介绍,并不全面,后期会不断更新~ React与Vue都是组件化的开发框架,整体功能类似. 一.数据处理模式(单项 or 双向): React推崇单项数据流的处理模式,数据不可以 ...
- (数据科学学习手札78)基于geopandas的空间数据分析——基础可视化
本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 通过前面的文章,我们已经对geopanda ...
- 源码浅析:MySQL一条insert操作,会写哪些文件?包括UNDO相关的文件吗?
DML操作的大致流程 在解答上述疑惑之前,我们来梳理一下DML操作的大致流程: 1.语法解析.语义解析 2.生成执行计划 3.事务修改阶段 1) 激活事务,事务状态由not_active变为activ ...
- 高级UI组件(二)
1.图像视图 <ImageView android:id="@+id/imageView" android:layout_width="wrap_content&q ...
- git rm与git rm --cached的区别
git rm与git rm --cached的区别 当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用. git rm file_path git commit -m 'd ...
- java设计模式学习笔记--浅谈设计模式
设计模式的目的 编写软件的过程中,程序员面临着来自耦合性,内聚性以及可维护性,可扩展性,重用性,灵活性等多方面的挑战.设计模式为了让程序具有更好的 1.代码重用性(即:相同功能的代码,不用多次编写) ...