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 知识点记录的更多相关文章

  1. Vue相关知识点记录

    1.安装 vue不支持ie8以下版本(无法模拟ECMAScript5特性),支持所有兼容ECMAScript5的浏览器. 浏览器安装Vue Devtools, 可以在更友好的界面中审查和调试Vue应用 ...

  2. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  3. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  4. 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 ...

  5. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  6. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  7. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  8. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  9. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  10. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

随机推荐

  1. NLTK之WordNet 接口【转】

    转自:http://www.cnblogs.com/kaituorensheng/p/3149095.html   WordNet是面向语义的英语词典,类似于传统字典.它是NLTK语料库的一部分,可以 ...

  2. 7.与python交互

    与python交互 在熟练使用sql语句的基础上,开始使用python语言提供的模块与mysql进行交互 这是我们在工作中大事要做的事 先学会sql是基础,一定要熟练编写sql语句 安装引入模块 安装 ...

  3. Sql Server Report 导出到EXCEL 指定行高

    在SQL SERVER REPORT 2005做报表的时候,发现在report中指定的行高没有用.google了一下,找到了解决方法. Make both CanGrow and CanShrink ...

  4. Word 如何实现表格快速一分为二

    将光标定位在分断处,按快捷键“Ctrl+Shift+Enter“

  5. 【VB6】全局键盘钩子

    基本也没啥好说的,不要用到木马及恶意程序中是以前从VB.NET程序改到VB6的,阉割了一些功能,只提供键盘Hook功能想要截获热键可以在处理函数中返回1,里面有示例 下载地址 http://pan.b ...

  6. C# 在WPF中使用Exceptionless异常日志框架

    登录http://exceptionless.com/官网,注册一个账户. 创建项目 选择wpf项目类型 拷贝下箭头指的这个密钥,过后程序里用的到. 下面我们打开vs,新建一个wpf的项目 打开git ...

  7. .gitignore文件常用写法

    一般的项目代码中会涉及到密码.key/secret等隐私内容,不适合上传github公开.这时可以使用.gitignore文件来屏蔽这些文件的提交. 你可能用到的写法如下 写法 含义 /build/ ...

  8. Linux Shell脚本编程基础(11)

    实际上Shell是一个命令解释器,它解释由用户输入的命令并且把它们送到内核,不仅如此,Shell有自己的编程语言用于对命令的编辑,它允许用户编写由shell命令组成的程序.Shel编程语言具有普通编程 ...

  9. 09_python_初始函数

    一.定义 函数是对功能和动作的封装 def functionname( parameters ): "函数_文档字符串" function_suite return [expres ...

  10. 说一下acad的bug及问题

    using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.DatabaseServices; using Autodesk. ...