vue——36-路由-传入参数

方法一（query）：

css

        .router-link-active {
            font-size: 20px;
            color: skyblue;
            font-weight: 800;
            font-style: italic;
            margin: 0 10px 0 10px;
        }

        span {
            cursor: default;
            user-select: none;
        }

        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .v-enter-active, .v-leave-active {
            transition: all 1s ease;
        }

        .v-move {
            transition: all 1s ease;
        }

        .v-leave-active {
            position: absolute;
        }

html

<div id="app">
    <!-- 如果在路由中，使用查询字符串 ? ，给路由传递参数，则不需要修改路由规则的 path 属性 -->
    <router-link to="/login?id=10&name='bob'" tag="span">登录</router-link>
    <router-link to="/register" tag="span">注册</router-link>

    <transition>
        <router-view></router-view>
    </transition>
</div>

js

        let login = {
            //写入参数两种方式 1.data中传入 2.$route.query.name 直接获取
            template: '<h1>登录 --- {{msg.id}} --- {{$route.query.name}}</h1>',
            data() {
                return {
                    msg: this.$route.query
                }
            },
            created() {
                //组件的生命周期钩子函数
                //通过 $route.query 获取router-link 的 to 路径后面用查询字符串传递进的参数
                console.log(this.$route.query);//{id: "10", name: "'bob'"}
            }
        };

        let register = {
            template: '<h1>注册</h1>'
        };

        let router = new VueRouter({
            routes: [
                {path: '/login', component: login},
                {path: '/register', component: register},

                {path: '/', redirect: '/login'}
            ]
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        });

方法二（params）：

css

        .router-link-active {
            font-size: 20px;
            color: skyblue;
            font-weight: 800;
            font-style: italic;
            margin: 0 10px 0 10px;
        }

        span {
            cursor: default;
            user-select: none;
        }

        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .v-enter-active, .v-leave-active {
            transition: all 1s ease;
        }

        .v-move {
            transition: all 1s ease;
        }

        .v-leave-active {
            position: absolute;
        }

html

<div id="app">
    <!-- 修改路由规则的 path 属性，之后在这后面拼接对应数据，传入 value -->
    <router-link to="/login/15/lucy" tag="span">登录</router-link>
    <router-link to="/register" tag="span">注册</router-link>

    <transition>
        <router-view></router-view>
    </transition>
</div>

js

        let login = {
            //写入参数两种方式 1.data中传入 2.$route.params.name 直接获取
            template: '<h1>登录 --- {{msg.id}} --- {{$route.params.name}}</h1>',
            data() {
                return {
                    msg: this.$route.params
                }
            },
            created() {
                console.log(this.$route.params);//{id: "15", name: "'lucy'"}
            }
        };

        let register = {
            template: '<h1>注册</h1>'
        };

        let router = new VueRouter({
            routes: [
                //修改 path 传入路径的 key
                {path: '/login/:id/:name', component: login},
                {path: '/register', component: register},

                {path: '/', redirect: '/login'}
            ]
        });

        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        });

补充

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>