一、标签路由 router-link

注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。

1、不传参

    <router-link :to="{name:'Home'}">
  <router-link :to="{path:'/home'}"> 2、传参   <router-link :to="{name:'Home', params: {id:1}}">
  <router-link :to="{path:'/home', params: {id:1}}">
  // params传参数
  // 路由配置 path: "/home/:id"
  // 不配置path ,第一次可请求,刷新页面id会消失
  // 配置path,刷新页面id会保留
  // html 取参 $route.params.id
  // script 取参 this.$route.params.id   <router-link :to="{name:'Home', query: {id:1}}">
  // query传参数 (类似get,页面url后面会显示参数)
  // 路由可不配置
  // html 取参 $route.query.id
  // script 取参 this.$route.query.id

二、编程式路由 this.$router.push()

1、不传参
  this.$router.push('/home')
  this.$router.push({name:'Home'})
  this.$router.push({path:'/home'}) 2、传参
  this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
  // params传参数
  // 路由配置 path: "/home/:id"
  // 不配置path ,第一次可请求,刷新页面id会消失
  // 配置path,刷新页面id会保留
  // html 取参 $route.params.id
  // script 取参 this.$route.params.id   this.$router.push({name:'Home',query: {id:'1'}})
  this.$router.push({path:'/home',query: {id:'1'}})
  // query传参数 (类似get,页面url后面会显示参数)
  // 路由可不配置
  // html 取参 $route.query.id
  // script 取参 this.$route.query.id

Vue-路由跳转的几种方式和路由重定向的更多相关文章

  1. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  2. Vue进行路由跳转的几种方式

    1.<router-link to="需要跳转到页面的路径"> 2.this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回 ...

  3. vue 页面跳转的两种方式

    1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...

  4. vue-router 路由传参的几种方式,刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

  5. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  6. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  7. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  8. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  9. VUE路由携带参数的三种方式

    vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...

随机推荐

  1. yolo系列阅读笔记(v1-v3)

    yolov1 模型输出的概率建模 图片首先被分割为S*S的网格(grid cell).如果一个bbox的中心落在一个网格里,则该网格负责检测该物体.(对于pascal数据集,S定为7) 每个网格预测B ...

  2. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  3. Markdown上手使用

    前言 学习Markdown主要是为了更好的编辑博客(捂脸),顺便学一学Markdown语法,毕竟MarkdownPad 2放着吃灰好久了(雾) MarkdownPad2 下载 链接:https://p ...

  4. 记录 shell学习过程(4)for 循环

    1. for in ` #seq 生成从1到10 如果生成从10到1则写作 seq 10 -1 1 do echo $i done for in 也可以循环出字符串 for i in where is ...

  5. FireFox浏览器的about:config参数大全及其具体用途介绍

    FireFox浏览器的about:config参数大全及其具体用途介绍,注意:这还远不是所有的about:config参数,由于设置参数太多,官方也只提供英文版本的说明,这里提供的FireFox ab ...

  6. [HAOI2016] 找相同字符 - 后缀数组,单调栈

    [HAOI2016] 找相同字符 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. \(n,m \l ...

  7. 当要打开PDB时为何会有Warning: PDB altered with errors.

    对PDB执行 alter pluggable database pdbprod2 open; 操作后提示:Warning: PDB altered with errors. 来自AskScuti博客园 ...

  8. 如何着手学习WebRTC开发(转)

    文章链接:http://www.sohu.com/a/146536246_458408 WebRTC中文社区-国内镜像:https://webrtc.org.cn/mirror/#windows%E2 ...

  9. codeforces 1282C. Petya and Exam (贪心)

    链接:https://codeforces.com/contest/1282/problem/C 题意:  有一个人参加考试,考试只有两种题,一种是简单题,每道题耗时固定为a:另一种是困难题,每道题耗 ...

  10. codeforces 1282B2. K for the Price of One (Hard Version) (dp)

    链接 https://codeforces.com/contest/1282/problem/B2 题意: 商店买东西,商店有n个物品,每个物品有自己的价格,商店有个优惠活动,当你买恰好k个东西时可以 ...