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 组件来导 ...
随机推荐
- Mysql 在线新建或重做主从
1. 前言 以前给 Mysql 数据库做主从,都是在主服务器停服的情况下做的.但是最近有一个项目,已经上线几天了,数据库也单服务器跑了几天,才确定要给 Mysql 服务器做一个主从架构,简单的一主一从 ...
- [Redis-CentOS7]Redis发布订阅操作(七)
发布订阅 发布:打电话 订阅:接电话 订阅频道 127.0.0.1:6379> SUBSCRIBE msg Reading messages... (press Ctrl-C to quit) ...
- css沉默
css变色龙实现. ==== css 1 水平居中和垂直居中. 2 css布局方式. 3 你写过UI框架么.
- Vue生命周期和钩子函数及使用keeplive缓存页面不重新加载
Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件,我们经常写的: ...
- python基础入门之二 —— 条件、循环语句
1.条件语句 if if…else… 多重if if嵌套 三目运算符 (化简的if else) if 条件: 条件成立执行代码1 条件成立执行代码2 if False: print('if判断 ...
- Linux忘记root用户的密码
问题: 由于长时间没有操作过自己安装的虚拟机,导致连root用户的密码都忘了,也真是没谁了. 我使用的是centos6.5,今天就记录一下,如何重置root用户的密码. 操作步骤: 步骤一: 当开机启 ...
- DataX的使用——大数据同步技术
准备工作: 1.视频教学http://113.31.104.47/portal/#/course/dashboard/b34d160db64624732ef152a1118af11a 2.DataX的 ...
- clr via c# delegate
1,委托列子 internal delegate void Feedback(int value); class DelegateRef { public static void StaticDele ...
- 折腾vue--环境搭建(一)
1.安装nodejs nodejs下载地址:https://nodejs.org/en/ 2.检测nodejs //检测nodejs版本 node -v //检测npm npm –v 3.安装vue ...
- 第1章 JavaScript 简介
第1章 JavaScript 简介 1.1 JavaScript简史 1.2 JavaScript实现 1.2.1 ECMAScript 1.2.2 文档对象模型(DOM) 1.2.3 浏览器对象模型 ...