VUE跳转路由携带参数 / 路由传参 / 的几种方法 . VUE如何怎么进行路由传递参数的代码

简述

由于需要使用到路由传递参数,所以查到一些VUE传递参数的几种方法,文章里总结了六种.

具体的文档可以去官方文档上查看.但是我读下来有一个体会 : 示例有些少.描述的比较精简.

以下贴出代码并有简要的概述.从代码的角度去描述使用VUE传递参数的几种方法.

代码可以直接粘贴到本地环境中进行查看与调试,方便直观的查看效果.

推荐阅读VUE官方文档:路由组件传参

代码

方式一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 时间 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        接收参数的第一种方式 
        */
        const Foo = {
            template: '<div>路由传递的参数是:{{$route.name}}</div>', // 通过$route接收
        }
        const Bar = {
            template: '<div>路由传递的参数是:{{$route.name}}</div>',
        }

        const routes = [
            { path: '/foo', component: Foo, name: "Foo" }, //  传递的name的值是这里的值
            { path: '/bar', component: Bar, name: "Bar" },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

$route包含了当前路由的一些可读信息.可以通过$route.name动态的获取到当前路由的name值.

方式二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link :to="{name:'Foo',params:{id:'testid',username:'hello'}}">Go to Foo</router-link>
            <router-link :to="{name:'Bar',query:{id:'notallowsend',username:'band'}}">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 时间 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        接收参数的第一种方式
        */
        const Foo = {
            template: '<div>Foo接收到路由传递的参数是:{{$route.params.id}} / {{$route.params.username}}</div>', // 通过$route接收
        }
        const Bar = {
            template: '<div>Bar接收到的路由传递的参数是:{{$route.query.id}} / {{$route.query.username}}</div>',
        }

        const routes = [
            { path: '/foo', component: Foo, name: "Foo" }, //  传递的name的值是这里的值
            { path: '/bar', component: Bar, name: "Bar" },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

通过router-link标签绑定路由的name值,并使用 params | query进行传递参数.并在路由的组件中使用$route.params | $route.query接收参数.传递要与接收的key一致.

方式三

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo/hello">Go to Foo</router-link>
            <router-link to="/bar/sayhi">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 时间 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        通过URL传递参数
        */
        const Foo = {
            template: '<div>Foo接收到路由传递的参数是:{{$route.params.respects}}</div>', // 通过$route接收
        }
        const Bar = {
            template: '<div>Bar接收到的路由传递的参数是:{{$route.params.respects}}</div>',
        }

        const routes = [
            { path: '/foo/:respects', component: Foo, name: "Foo" }, //  传递的name的值是这里的值 => respects
            { path: '/bar/:respects', component: Bar, name: "Bar" },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>
</html>

通过路由发送参数,并使用 $route.params接收参数

方式四

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo/123">Go to Foo</router-link>
            <router-link to="/bar/345">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 时间 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************
        /*
        通过URL传递参数
        */
        const Foo = {
            props: ['id'],
            template: '<div>Foo接收到路由传递的参数是:{{$route.params.id}} / {{id}}</div>', // 通过$route接收
        }
        const Bar = {
            props: ['id'],
            template: '<div>Bar接收到的路由传递的参数是:{{$route.params.id}} / {{id}}</div>',
        }

        const routes = [
            { path: '/foo/:id', component: Foo, name: "Foo", props: true }, //  传递的name的值是这里的值
            { path: '/bar/:id', component: Bar, name: "Bar", props: true },
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

通过路由传递参数,与方式四不同的是.这里使用props接收参数.

而在vue官网的文档中有这么一句话:如果 props 被设置为 true，route.params 将会被设置为组件属性。这里的组件属性我的理解就是$route.params将会被设置组件的props属性.并可以使用props进行接收.而这里的ture,也许指的是truthy.props可以设置为 1 或者是一个空对象都可以达到true的作用.因为它们被隐式转换为true了.

方式五

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo?q=123">Go to Foo</router-link>
            <router-link to="/bar?q=456">Go to Bar</router-link>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>
        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 时间 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************

        /*
        通过URL传递参数
        */
        const Foo = {
            props: ['query'],
            template: '<div @click="displayArg">Foo接收到路由传递的参数是:{{$route.params.query  }} / {{query}}</div>', // 通过$route接收
            methods: {
                displayArg() {

                    console.log(this.$route.params);
                }
            },
        }
        const Bar = {
            props: ['query'],
            template: '<div>Bar接收到的路由传递的参数是:{{$route.params.query}} / {{query}}</div>',
        }

        const routes = [
            { path: '/foo', component: Foo, name: "Foo", props: (route) => ({ query: route.query.q }) }, //  传递的name的值是这里的值
            { path: '/bar', component: Bar, name: "Bar", props: { id: 456 } }, // truely
        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount('#app')

    </script>
</body>

</html>

通过URL的查询参数传递参数.而在props是为一个过滤函数的.通过这种方式来传递参数.

方式六

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>

    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <button @click='goToFoo'>Go to Foo</button>
            <button @click='goToBar'>Go to Bar</button>
        </p>
        <router-view>
        </router-view>
    </div>

    <script>

        // ******************************
        // Vue Version: 2.6.11
        // Vue-router Version : 3.4.3
        // 时间 : 2020 / 08 / 17
        // @tanplay.com
        // ******************************

        /*
        使用路由携带参数进行跳转
        */
        const Foo = {
            template: '<div @click="displayArg">Foo接收到路由传递的参数是</div>', // 通过$route接收
            methods: {
                displayArg() {
                    console.log('----------------');
                    console.log(this.$route)
                    console.log(this.$route.params.sex);
                    console.log(this.$route.query.sex);
                }
            },
        };

        const Bar = {
            template: '<div @click="displayArg">Bar接收到的路由传递的参数是</div>',
            methods: {
                displayArg() { // $route.params.query接收不到
                    console.log('----------------');
                    console.log(this.$route);
                }
            },
        };

        const routes = [
            { path: '/foo', component: Foo, name: "Foo", props: true }, //  传递的name的值是这里的值
            { path: '/bar', component: Bar, name: "Bar", }, // truely
        ]
        const router = new VueRouter({
            routes
        });
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                goToFoo() {
                    if (this.$route.path == '/foo') {
                        console.log("正处在当前路由中.");
                        return false;
                    }
                    this.$router.push({ name: "Foo", params: { sex: "男" } }); // 使用name跳转的页面,使用params进行传递与接受.
                    // this.$router.push({ name: "Foo", query: { sex: "男" } }); // 使用name跳转的页面,使用query进行传递与接收.
                },
                goToBar() {
                    if (this.$route.path == '/bar') {
                        console.log("正处在当前路由中.");
                        return false;
                    }
                    this.$router.push({ path: "/bar", query: { sex: "女" } }); // 受用path跳转的页面,使用query进行传递与接受.可以把paramas与query进行互换测试.
                    // this.$router.push({ path: "/bar", params: { sex: "女" } }); // 这种不可使用
                }
            },
            router,

        }).$mount('#app');

        /*
        情况总结 :
        如果是 使用name进行跳转
            - 如果跳转的参数设置为params,那么要使用params进行接收.
            - 如果使用query,要使用query进行接收.(网上都不推荐进行这样使用.但是我不知道为什么.使用query传参类似于HTTP请求中的GET.参数是显式进行传递的,重新刷新页面并不会丢失传递参数.而使用params类似于HTTP请求中的POST,重新参数之后重新刷新页面会丢失数据.)
        如果使用 path进行跳转
            - 只可以使用query进行传递参数
            - 不可以使用parmrams进行跳转页面
        */
    </script>
</body>

</html>

情况总结 :

如果是使用是使用name进行跳转路由.
- 如果跳转的参数设置为params,那么要使用params进行接收.(重新刷新被跳转的页面,会丢失数据)
- 如果使用query,要使用query进行接收.(网上好说人不推荐这样使用,我不明白为什么).(重新刷新被跳转的页面,不会丢失数据)
如果使用path进行跳转
- 只可以使用query进行传递参数

使用 $this.router.push()进行路由跳转.之后在被跳转的页面中使用$route接收.

参考

路由组件传参 - VUE官方文档

相关阅读:
vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改
 flatpickr插件的使用
 初始化react项目
 带框和三角的样式
 手机号掩码
 微信小程序中自定义modal
js 发送短信验证码倒计时
 js模拟输入支付密码
 python接口自动化测试十三：url编码与解码
 python接口自动化测试十一：传参数：data与json
原文地址：https://www.cnblogs.com/gtscool/p/13518443.html