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 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...
随机推荐
- Python自动化开发 - 生成器、迭代器
本节内容 1.列表生成式 2.生成器 3.迭代器 一.列表生成式 需求:把列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]里,每个元素都加1 # 复制版,重新绑定 a = [0, 1, ...
- [Proposal]Nano-Diary(纳日记)
[Motivation] 很多人都有记日记的习惯,不为别的,就为了那份情怀.但是也有很多人不记日记,原因是嫌写字麻烦.记得很久很久以前,在<读者>上读过一篇文章,大意是一个人用数值记下每天 ...
- [UWP开发] 在低版本中使用亚克力刷以及部分高版本控件
写于2018.10.3 仅在我的PC(17763)和WP(Limia 950 XL 15254)上测试过 微软在build 16299中引入了亚克力刷,但是Win10m并没有活那么久,lumia手机在 ...
- Python运维脚本整理
Python 实现的自动化服务器管理 import sys import os import paramiko ssh = paramiko.SSHClient() ssh.set_missing_h ...
- 前端在js中获取用户所在地区的时间与时区
var times = Date() // 如果这种方式不行就使用 New Date() "Sat Jan 05 2019 10:35:24 GMT+0800 (中国标准时间)" ...
- Spark踩坑——java.lang.AbstractMethodError
今天新开发的Structured streaming部署到集群时,总是报这个错: SLF4J: Class path contains multiple SLF4J bindings. SLF4J: ...
- linux只读文件系统
一般方法如下 首先试下重新挂载行不行 mount -o remount,rw /dev/sda3 不行的话用fsck,具体方法如下 1. mount命令查看变成只读文件的位置,比如/dev/sda32 ...
- 腾讯开源极限渲染js模板链接
https://aui.github.io/art-template/zh-cn/index.html
- C# SaveFileDialog的用法
#region 保存对话框 private void ShowSaveFileDialog() { //string localFilePath, fileNameExt, newFileName, ...
- [Umbraco] 自定义DataType中Data Editor Setting Type
上一篇介绍了在定义Document Type中的属性时用到的Data Type,当使用dropdown list如何调用外部数据源,可以根据提供的数据连接字符串,sql语句就能实现你想要显示的数据. ...