关闭

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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

vue动态路由_vue-router通过接口请求动态生成路由的实现

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了

前端路由(history+hash)

在传统网站开发中,我们一般使用比如asp、php、jsp等技术进行开发,开发完成后统一部署在服务器上,我们访问时,会在浏览器中发送带有.asp,.php,.jsp等后缀路径的url请求,服务器会根据对应的路由映射表

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

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

vue动态加载路由_实现vue动态加载路由器设置

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。

Vue开发之vue-router的基本使用

如果你用vue-cli脚手架来搭建项目,配置过程会选择是否用到路由,如果选择Yes,后面下载依赖会自动下载vue-router。将组件 (components) 映射到路由 (routes)并渲染

为你的 React 应用创建路由

通常,当用户在浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。对于每个新URL,用户会被重定向到新的 HTML 页面。你可以通过参考下图来更好地理解路由的工作原理。

Flutter开发之导航与路由管理

所谓路由管理,就是管理页面之间如何跳转,也被称为导航管理。这和原生开发类似,无论是Android还是iOS,导航管理都是通过维护一个路由栈来实现的,路由入栈(push)操作对应打开一个新页面,路由出栈(pop)操作对应页面关闭操作

vue-router 导航守卫中 next 控制实现

使用 vue-router 的导航守卫钩子函数,某些钩子函数可以让开发者根据业务逻辑,控制是否进行下一步,或者进入到指定的路由。

在vue中使用setTimeout,离开当前路由setTimeout未销毁的问题

从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况。

vue router 路由鉴权(非动态路由)

原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。

点击更多...

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