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. 论EFMS模拟量部分采集电路的修改

    论1:电阻R11的作用 如图1是2014-3-11之前模拟量采集的部分硬件电路,图2是纠正后的正确电路. D5是SA20CA,TVS双向二极管,有效防止外接电源的浪涌冲击情况,保护电路.  D6是稳压 ...

  2. [javascript] javascript 实现数据滚动加载

    // tpl generate var tmpl = (function (cache, $) { return function (str, data) { var fn = !/\s/.test( ...

  3. 3.翻译:EF基础系列--EF怎么工作的?

    原文链接:http://www.entityframeworktutorial.net/basics/how-entity-framework-works.aspx 这里,你将会大概了解到EF是怎么工 ...

  4. 货车运输(最大生成树+倍增LCA)

    看到第一篇题解的神奇码风--我决定发一篇码风正常的题解造福人类 这题的做法也非常经典,最大生成树\(+LCA\),相当于先贪心一下,在LCA的时候记录一下当前最小的边权 顺便吐槽一下最后一个测试点: ...

  5. php防sql注入过滤代码

    防止sql注入的函数,过滤掉那些非法的字符,提高sql安全性,同时也可以过滤XSS的攻击. function filter($str) { if (empty($str)) return false; ...

  6. WCF:初识

    结构: using System.ServiceModel; namespace MyServices { [ServiceContract] public interface IHomeServic ...

  7. Shell - 简明Shell入门08 - 函数(Function)

    示例脚本及注释 #!/bin/bash function Check() # 使用function定义函数 { Say # 通过函数名直接调用函数 if test $1 then return 0 # ...

  8. Python(28)---模块和包的基本概念

    一.模块 定义:在python中,一个 .py 文件就称为一个模块 使用模块的好处:最大的好处就是提高了代码的可维护性 分类(三种): python标准库 第三方模块 应用程序自定义模块 模块导入方法 ...

  9. POJ 2491

    #include<iostream>#include<stdio.h>#include<string>#define MAXN 400using namespace ...

  10. 使用ServiceStack改造我们的项目

    ServiceStack是一个NET环境下的开源框架集合 包括轻量级的Orm框架,数据库访问,Json处理,Redis驱动等多个模块,我们可以按需选择使用 serviceStack.Ormlite s ...