快捷導航

vue-router中 query傳參和params傳參的使用和區(qū)別講解

更新時間：2024年01月17日 11:18:31 作者：alokka

這篇文章主要介紹了vue-router中 query傳參和params傳參的使用和區(qū)別講解,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1.query傳參：

1.query傳參
路由：

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { name:'register',path: '/register', component: register } 
      ]
    })

導航：

// 注意：這是 query 兩種傳參方式 一種是直接跳轉(zhuǎn)把字符串傳過去 一種是傳描述目標位置的對象
    <router-link to="/login?id=10&name=zs">登錄</router-link>
    <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注冊</router-link>
    或
    <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注冊</router-link>
等同于：
	this.$router.push('/login?id=10&name=zs')
	this.$router.push({path:'/register',query:{id:5,name:'lili'}})
	或
	this.$router.push({name:'register',query:{id:5,name:'lili'}})

注意：jquery可以通過name或path來引入路由

2.params傳參

2.params傳參
路由：

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },// 這里不傳入對應的參數(shù)（:/id/:name） 刷新頁面 參數(shù)會消失,頁面中就丟失了數(shù)據(jù)
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })

導航：

// 注意：這是 params 兩種傳參方式 一種是直接跳轉(zhuǎn)把字符串傳過去 一種是傳描述目標位置的對象
    <router-link to="/login/12/ls">登錄</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注冊</router-link>
等同于：
	this.$router.push('/login/12/ls')
	this.$router.push({name:'register',params:{id:10,name:'lili'}})

注意：params只能通過name來引入路由，path會undefined

jquery傳參和params傳參的區(qū)別

1.用法上:

上文已經(jīng)提到query可以用name或path來引入
params必需要用name來引入，接收參數(shù)都是類似的，分別是:

this.$route.query.name和this.$route.params.name。

2.地址欄表現(xiàn)形式上:
query：

params：

注意：這里的12和ls 對應的是/:id/:name 這兩個參數(shù)可以不寫那么就不會在地址欄上顯示不過刷新頁面參數(shù)會消失寫上參數(shù)刷新頁面參數(shù)不會消失

到此這篇關(guān)于vue-router中 query傳參和params傳參的使用和區(qū)別的文章就介紹到這了,更多相關(guān)vue-router query和params傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: