Vue路由传参及参数的监听

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

1. Path 跳转 + 问号传参

1、to 的值是一个字符串

<router-link to="/user?id=888">用户</router-link>

2、to 的值可以是一个对象，通过 path 配合问号传参

<router-link :to="{ path: '/user?id=888' }">用户</router-link>

3、to 的值可以是一个对象，path + query

<router-link :to="{ path: '/user', query: { id: 888 } }">用户</router-link>

2. Path 跳转，会忽略 Params

3. Name 跳转 + 问号传参

<router-link :to="{ name: 'user', query: { id: 888 } }">用户</router-link>

4. Name 跳转 + Params 传参

<router-link :to="{ name: 'user', params: { id: 888 } }">用户</router-link>

注意：router/index.js 中的 :id 不能省略，省略也能拿到数据，但刷新时会丢失！

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

export default new VueRouter({
    routes: [
        { path: "/user/:id", name: "user", component: () => import("@/components/User.vue") }
    ]
});

5. 开启 Props 传参的几种写法

1、Props 是一个布尔值

router/index.js

export default new VueRouter({
    routes: [
        {
            path: "/user/:id",
            name: "user",
            component: () => import("@/components/User.vue"),
            props: true
        }
    ]
});

User.vue

<template>
    <div>User: {{ id }}</div>
</template>

<script>
export default {
    name: "User",
    props: ["id"]
};
</script>

2、Props 指定为对象

router/index.js

export default new VueRouter({
    routes: [
        {
            path: "/user/:id",
            name: "user",
            component: () => import("@/components/User.vue"),
            props: { name: "ifer", age: 18 }
        }
    ]
});

问题：路由中的 ID 找不到了

3、Props 指定为函数

export default new VueRouter({
    routes: [
        {
            path: "/user/:id",
            name: "user",
            component: () => import("@/components/User.vue"),
            props: route => ({ name: "ifer", age: 18, id: route.params.id })
        }
    ]
});

6. 路由传参与监听器的使用

如何在 JS 代码中获取路由参数

<template>
    <div>User: {{ $route.params.id }}</div>
</template>

<script>
export default {
    name: "User",
    created() {
        // !有问题
        console.log(this.$route.params.id);
    },
    watch: {
        $route(to) {
            console.log(to.params.id);
        }
    }
};
</script>

7. 在组件中怎么监听路由参数的变化

在日常业务中也可能需要根据路由参数的变化做相应的处理，监听只能在包含<router-view />的组件内使用

• 通过watch监听

  • watch：{'$route' (to,from) { // 在这儿监听 }}

• beforeRouteUpdate

  • beforeRouteUpdate(to,from,next){ // 这里监听 }