vue-router 知识点记录
vue-router参数传递
1.在vue-router中,有两大对象被挂载到了实例this
2.$route(只读、具备信息的对象)、$router(具备函数功能)。例:获取query用 this.$router.query.id
3.查询字符串方式传递参数
1).去哪里 <router-link :to="{name:'detail',query:{id:1}}">xxx</router-link>
2).路由导航设置{name:'detail',path:'/detail',组件}
3).去了干嘛,获取路由参数(要注意是query还是params和对应的id名) this.$router.query.id
4.path方式传递参数
1).去哪里 <router-link :to="{name:'detail',params:{id:1}}">xxx</router-link>
2).路由导航设置(path方式需要在路由规则上加上/:xxx){name:'detail',path:'/detail/id',组件}
3).去了干嘛,获取路由参数(要注意是query还是params和对应的id名) this.$router.params.id
参考:https://www.cnblogs.com/zhousen34/p/7651374.html
vue-router 知识点记录的更多相关文章
- Vue相关知识点记录
1.安装 vue不支持ie8以下版本(无法模拟ECMAScript5特性),支持所有兼容ECMAScript5的浏览器. 浏览器安装Vue Devtools, 可以在更友好的界面中审查和调试Vue应用 ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- vue Router——进阶篇
vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...
随机推荐
- sql一些基本的语法
1.if语句: 语法:IF(expr1,expr2,expr3) 其中,expr1是判断条件,expr2和expr3是符合expr1的自定义的返回结果. 用处:当从数据库中查询出来的结果需要转换成中文 ...
- DXP快捷键记录(红色为经常用到的)
dxp快捷键 1.设计浏览器快捷键:鼠标左击 选择鼠标位置的文档鼠标双击 编辑鼠标位置的文档鼠标右击 ...
- QuartzNet使用
quartz.config # You can configure your scheduler in either <quartz> configuration section # or ...
- Asp.Net 学习笔记(IIS不同版本和Asp.Net)
主要目的是在网上记录一下学习笔记,如有不对,请指出 谢谢!! iis5.x: 存在问题,inet info收到动态请求后,aspnt_isapi.dll会被加载到inetinfo.exe(挂载w3sv ...
- unity2D 船只型物体驱动的实现
船只向前行驶的驱动力 假设在水中没有摩擦阻力,船只有惯性,船只可以转弯,按下前进键时船只会在力的作用下使得自身的物理运动方向变化到自身的前方方向,从而向前行进. 上图中 V:船当前物理速度 V1,V2 ...
- Android开发教程 - 使用Data Binding(八)使用自定义Interface
本系列目录 使用Data Binding(一)介绍 使用Data Binding(二)集成与配置 使用Data Binding(三)在Activity中的使用 使用Data Binding(四)在Fr ...
- wcf返回值报错解析
问题来源 最近在项目中使用wcf,因为是一个新手,对新的东西总是比较敬畏,不过一切都是进行得很顺利,运行的时候,突然报了错,编译器提示的错误大概是:“InvalidOperationException ...
- 几种int类型的范围
我们在编程的过程经常会遇到数据溢出的情况,于是这个时候我们必须定义能表示更大的数的数据类型来表示这个数. 下面列出了int型的范围: unsigned int 0-4294967295 ...
- Zookeeper配置文件中的配置项解释和Zookeeper的安装
zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:CS通信心跳时间Zoo ...
- SpringSecurity学习之快速上手
互联网项目中,安全与权限控制是不可回避的问题,为了解决这一些列问题,许多安全框架应运而生了.这些框架旨在帮我们解决公用的安全问题,让我们的程序更加健壮,从而让程序员全身心投入到业务开发当中.那么Spr ...