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. Monkey学习网址

    http://***/2015/12/24/Android-Monkey-Test/ http://bbs.pediy.com/showthread.php?t=189584 http://***/2 ...

  2. Java学习---- 数组的引用传递

    1. public class ArrayRefDemo01{ public static void main(String args[]){ int temp[] = {1,3,5} ; // 利用 ...

  3. Spring下配置几种常用连接池

    1.连接池概述 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库连接池正是 ...

  4. GDI+配置

    GDI+的配置过程: 一.打开stdafx.h文件,在其中加入: #include "Gdiplus.h" #pragma comment(lib,"Gdiplus.h& ...

  5. Decimal类型截取保留N位小数向上取, Decimal类型截取保留N位小数并且不进行四舍五入操作

    Decimal类型截取保留N位小数向上取Decimal类型截取保留N位小数并且不进行四舍五入操作 封装静态方法 public class DecimalHelper { /// <summary ...

  6. HttpClient的帮助类

    /// <summary> /// http请求类 /// </summary> public class HttpHelper { private HttpClient _h ...

  7. OCP考试062题库出现大量新题-19

    choose three Which three statements are true about Oracle Data Pump? A) Oracle Data Pump export and ...

  8. win7 docker 挂载共享目录

    在 win7 下用 docker 不像 win10 那样方便,安装包都不一样. 在 win7 下共享一个目录的方法如下: 1. 先设置 win7 到 VirtualBox 中 docker 用的那个虚 ...

  9. Java入门-类HelloWorld是公共的,应在名为HelloWorld.java的文件中声明

    开始学习java了,搭好环境,notepad++中新建一个java文件,新建一个HelloWorld类, public class HelloWorld { public static void ma ...

  10. day 39 jq 学习入门2

    ---恢复内容开始--- 前情提要: jq 是用来降低js 的工作的一个组件 一:利用jq 实现动画效果 <!DOCTYPE html> <html lang="en&qu ...