一、标签路由 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. set的使用

    集合是Python的一种数据类型,集合是一个可变容器.常用于列表的去重. 什么是集合 集合是一个可变容器 集合中的数据对象都是唯一的(不可重复) 集合是无序的存储结构 集合是可迭代对象 集合内的元素是 ...

  2. SpringCloud Netflix Zuul

    网关的概念 服务A.B都是暴露出来,供外部直接调用的, 有时候需要对请求进行过滤.校验,比如检验用户是否已登陆,可以写在暴露出来的每个服务中,但要在多个服务中写相同的代码,太繁琐,可以提出来,放在网关 ...

  3. axios的基本用法与并发请求

    一.axios的基本用法 <router-link to="" class="a1" @click.native="logins"&g ...

  4. CentOS安装RabbitMQ-yum

    CentOS安装RabbitMQ----yum安装 一.安装erlang 由于CentOS没有erlang源,需用 第三方源(http://rpmfusion.org/Configuration) 1 ...

  5. 【Python】random库

    种子相同,随机数相同

  6. C语言-数组指针与指针数组

    1.思考 下面这些声明合法吗? int array[5]; int matrix[3][3]; int * pa = array; int * pm = matrix; 问题: array代表数组首元 ...

  7. linux 命令 mkdir

    mkdir -p 如果要创建目录A并创建目录A的子目录B,没有用-p的情况下mkdir 逐个的创建目录(mkdir A,mkdir A/B); 如果用-p 可以直接创建2个目录 mkdir -p A/ ...

  8. python如何离线装包 离线如何部署python环境

    1,安装python windows: 我用的是python3.6.6.exe安装包,需要提前下载好 ubuntu: 自带的python,如果是ubuntu18.04的话,自带的应该是3.6.8 2, ...

  9. 同一域名的ASP.NET网站实现Session共享

    Session共享主要保证两点: 前台Asp_SessionId的Cookie作用域为顶级域名,且值相同 后端Session公用同一源 通过自定义HttpModule可以实现这两个需求 /// < ...

  10. win32 用户自定义消息范围

    WINDOWS自定义消息WM_USER和WM_APP WM_USER常量是Windows帮助应用程序定义私有窗口类里的私有消息,通常使用WM_USER+一个整数值,但总值不能超过0x7FFF. #de ...