方法一（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
        });