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

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

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

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

Flutter路由导航

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

Vue Router4 的相对之前的变化

Vue 3 引入了createApp API,该API更改了将插件添加到Vue实例的方式。 因此,以前版本的Vue Router将与Vue3不兼容。Vue Router 4 引入了createRouter API,该API创建了一个可以在Vue3中安装 router 实例。

实现vue-router部分功能

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

vue-router的简易实现

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

Flutter开发之导航与路由管理

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

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

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

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢

vue的路由权限控制,如何从后台获取数据呀

把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可。 vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转。

vue 路由过渡动效

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

HTML5 History 模式

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

点击更多...

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