Vue路由獲取路由參數

本文轉載自查看原文 2018-09-05 23:55 52249 路由/ Vue/ vue

vue路由設置路由參數有2種方式：

1.通過query配置：

<router-link :to="{ name:'login',query:{id:1} }">登錄</router-link>

通過query配置的路徑顯示如下：

2.通過params配置：

<router-link :to="{ name:'register',params:{'name':'San'} }">注冊</router-link>

通過query配置的路徑顯示如下：

通過該方法配置的參數，需要在配置路由的時候給參數留個坑，如下圖：

獲取路由參數的方法：

1.通過query配置的：

this.$route.query

2.通過params配置的：

this.$route.params

相關代碼：

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

<head>
    <title>路由參數</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>

<body>

    <div id="app">
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var Login = {
            template:`<div>我是登錄頁面</div>`,
            created() {
                console.log(this.$route.query)
            },
            
        }

        var Register = {
            template:`<div>我是注冊頁面</div>`,
            created() {
                console.log(this.$route.params)
            },
        }

        Vue.use(VueRouter);

        var router = new VueRouter({
            routes:[
                {name:'login',path:'/login',component:Login},
                //通過params傳遞的路由參數需要用 :參數名 來占個坑
                {name:'register',path:'/register/:name',component:Register}
            ]
        });
        
        var App = {
            template:`
                <div>
                    <router-link :to="{ name:'login',query:{id:1} }">登錄</router-link>
                    <router-link :to="{ name:'register',params:{'name':'San'} }">注冊</router-link>
                    <router-view></router-view>
                </div>
            `
        }

        var vm = new Vue({
            el: '#app',
            router:router,
            components: {
                app:App
            },
            template:`<app></app>`
        });
    </script>

</body>

</html>

補充說明：

$route:路由信息對象，只讀對象；

$router:路由操作對象，只寫對象。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue路由獲取路由參數 Vue路由獲取路由參數 vue 路由參數的獲取 Vue路由傳遞獲取參數 Vue Router路由組件參數的傳遞與獲取 Vue3.0 - 路由參數的獲取 vue路由參數的獲取、添加和替換 js獲取路由參數獲取路由參數 getUrlParam vue路由跳轉傳參數