Vue路由传参的三种基本方式

Vue路由传参的三种基本方式
现有如下场景,点击一个button按钮跳转到另外一个路由页面,并向目标路由页面传递参数,便于目标路由页面获取源页面传递的数据信息。
源页面中:

<button @click="gotoTargetView">点击跳转到目标路由user页面</button>

实例
首先我在home.vue中定义

updates(id){
              this.$router.push({
                path:'/world',
                name:'world',
                params:{
                 id : id
                }
              })
            }

其次在另一个页面world.vue中

export default {
    name: '',
    data () {
      return {
        id: ''
      }
    },
    created(){
       this.getParams()
    },
    methods: {
      getParams () {
        // 取到路由带过来的参数 
        var routerParams = this.$route.params.id
        // 将数据放在当前组件的数据内
        this.id = routerParams
      }
    },
    watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
      '$route': 'getParams'
    }
  }

下面是三种具体的传参方式
方案一,通过调用$router对象的push()方法,向push()方法传递一个路由配置对象,通过params来传递参数
需要注意的是使用params必须和name属性一起使用,否则要跳转的目标路由页面无法通过params获取到传递过来的参数。

路由配置:

{
    path: '/user',
    name: 'user',
    component: User
}
methods:

gotoTargetView(){
    this.$router.push({name:"user", params:{userName:"lhb"}});//注意name不能换成path:"/user"
}

User.vue组件:

this.$route.params.userName;//User.vue组件中就可以通过$route的params获取到

方案二:通过调用$router对象的push()方法,向push()方法传递一个路由配置对象,需要通过query来传递参数
需要注意的是使用query的时候,可以通过path属性也可以通过name属性来指定目标路由。

这种情况下,query传递的参数会显示在url后面?userName=?&,如:
http://localhost:8082/about?userName=lhb
对应路由配置:

{
    path: '/user',
    name: 'user',
    component: User
}
methods:

gotoTargetView(){
    this.$router.push({name:"user",query:{"userName":"lhb"}});
    this.$router.push({path:"/user",query:{"userName":"lhb"}});
}

User.vue组件:

this.$route.query.userName;//User.vue组件中就可以通过$route的query获取到

方案三:通过路由配置,配置动态路由参数
上面的路由配置都是严格匹配的,只有要访问的路径与路由配置中的path一模一样,才能跳转到相应的组件上. 但有时现实却不是这样的,当我们去访问网站并登录成功后,它会显示 欢迎你,+ 你的名字。不同的用户登录, 只是显示"你的名字"部分不同,其它部分是一样的。这就表示,它是一个组件,假设是user组件。不同的用户(就是用户的id不同),它都会导航到同一个user 组件中。这样我们在配置路由的时候,就不能写死, 就是路由中的path属性,不能写死,那要怎么设置? 导航到 user 组件,路径中肯定有user, id 不同,那就给路径一个动态部分来匹配不同的id. 在vue-router中,动态部分 以 : 开头,那么路径就变成了 /user/:id, 这条路由就可以这么写:{ path:"/user/:id", component: user }.

对应路由配置:

{
    path: '/user/:userName',
    name: 'user',
    component: User
}
methods:

gotoTargetView() {
    this.$router.push({path:`/user/${userName}`});
}

User.vue组件:

this.$route.params.userName;//User.vue组件中就可以通过$route的params获取到
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值