关闭

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

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

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

为你的 React 应用创建路由

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

Flutter页面切换(命名路由)

使用基本路由相对简单灵活,适用于应用中页面不多的场景。而在应用中页面比较多的情况下,再使用基本路由,会导致大量的重复代码,此时使用命名路由会非常方便

前端路由Hash与History模式

现代前端项目多为单页Web应用(SPA),在单页Web应用中路由是其中的重要环节。SPA 是 single page web application 的简称,译为单页Web应用。简单的说 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成

vue 路由过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

vue-router的简易实现

现在很多项目的前端都是用vue单页面实现的,而单页面中最重要的一个环节就是路由,今天来实现一个简易版本的vue-router。

HTML5 History 模式

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

Flutter路由导航

我们通常会用屏(Screen)来称呼一个页面(Page),一个完整的App应该是有多个Page组成的。通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换,除了上面这种管理页面的方式,我们还需要实现其它功能的页面跳转

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

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

点击更多...

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