vue组件中的各种路由传值
发布于 1 个月前 作者 zjw1658414517 752 次浏览 来自 分享

vue 路由传值

动态路由

  • 首先给当前页面的路由对象设置动态参数
  • 例如
    {
    // 这是配置动态路由的方法 :后边的值是路由对象params参数中的key
    // 要使用:后加上我们要传递的值的key
    path: '/ask/:id',
    name: 'ask',
    component: ask
  },
//   动态路由页面跳转方法
    <router-link v-bind:to="'/ask/' + 要传递的值"></router-link>
    // 目标页面获取动态路由参数的方法 在目标也页面的created()函数中
    created() {
        console.log(this.$route.params)
    }
    

通过params传递参数

  • 要用params传递参数 首先跳转方法要使用name属性
  • 跳转成功 在目标页面的路由中 看不到传递的参数
  • 但是可以通过 目标也面的created函数获取
  • 例如
    <router-link v-bind:to="{
        name: '路由对象的name',
        params: {
            // 可以是任何键值对
        }
    }"></router-link>
    created() {
        console.log(this.$route.params)
    }
    

通过query传递参数

  • query可以和path属性配合传递参数 也可以和name属性配合传递参数
  • 传递的参数可以在目标页面的路由中看到对应的键值对
<router-link v-bind:to="{
    path: '路由对象的path值',|| name: '路由对象的name值',
    query: {
        // 可以使任何键值对
    }
}"></router-link>
// 值可以在目标页面的created函数中获取
created() {
    console.log(this.$route.query)
}
回到顶部