路由传值

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)
}