vue路由传参主要的3种方式

时间: 2018-07-17阅读: 4788标签: 路由

1、query方式

(push时使用path来匹配)
发起页面:
this.$router.push({
   path: "/accept", //接收页面路由
   query: {
     id: 222
   }
});


路由配置:
routes: [{
   path: "/accept"
}]

接受参数页面:
export default{
  data(){
    return{
      id:this.$router.query.id; //这里接收参数
    }
  }
}


跳转转收页面的时候,地址栏会显示:
http://ip:port/accept?id=222



2、params模式

(push时使用name来匹配)
发起页面:
this.$router.push({
  name: "accept", //路由配置中的name
  params:{
    id:222
  }
});

路由配置:
routes: [{
   name: "accept",
   path: "/accept"
}]


接收参数页面:
export default{
  data(){
    return{
      id:this.$router.params.id; //这里接收
    }
  }
}
跳转转收页面的时候,地址栏显示目的地址,不带任何参数


3、location预声明参数模式

(push使用path来匹配,但是它跟params模式不同)
发起页面:
this.$router.push({
   path: '/accept/222'
});


路由配置:
routes: [{
   path: "/accept/:id"
}]


接收参数页面:
export default{
  data(){
      return{
          id: this.$router.params.id
      }
  }
}

路由跳转时,url会显示:
http://ip:port/accept/222


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/935

Vue 路由知识点归纳总结

无刷新跳转页面,是单页应用的一大优势,用户体验好,加载速度快,vue 路由的跳转就是无刷新的,它有两种形式,可以在定义路由的时候通过 mode 字段去配置,如果不配置这个字段,那么默认使用的就是 hash 模式。

从了解Hash和Html5 History 到简单实现路由

hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分),在页面中的hash有多种功能意义:浏览器读取到hash之后自动滚动到该对应元素所在位置的可视区域内

前端中的 hash 和 history 路由

前端路由有有 hash 路由和 history 路由两种路由方式,他们的原理是什么,又怎样实现一个简单的路由监听呢?我们在使用 Vue 或者 React 等前端渲染时,通常会有 hash 路由和 history 路由两种路由方式。

理解Web路由

在Web开发过程中,经常会遇到『路由』的概念。那么,到底什么是路由?简单来说,路由就是URL到函数的映射。route就是一条路由,它将一个URL路径和一个函数进行映射

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

js实现哈西路由原理

在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理,先看一个简单的路由和页面内容关联的例子,要实现两个功能:

react-router中的exact和strict

每次用配置react路由都会考虑是否应该给给<Route>组件加上exact或strict。下面妹子将于自认为比较清晰的方式列举出来什么场景需要加和不加。如果没有子路由的情况,建议大家配都加一个exact;

react-router 在路由切换时进行提示

在有正在编辑的内容未保存时,发生了路由切换,此时需要给出一些提示,并由用户控制是否进行跳转。在react-router进行路由管理时,可以使用 Prompt 组件实现此功能

实现vue-router部分功能

为了了解路由的底层工作原理,自己参考资料,仿写了vue-router的部分功能。当然自己写的DEMO功能较粗糙,主要实现核心功能,其它功能有待完善、补充。

Vue中$router.push、replace、go的区别

this.$router.push()跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面;this.$router.replace()同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!