vue-router中 query傳參和params傳參的區別和注意事項
阿新 • • 發佈:2018-12-29
1.query傳參:
1.query傳參
路由:
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ name:'register',path: '/register', component: register } // name 或 path
]
})
導航:
<router-link to="/login?id=10&name=zs">登入</router-link>
<router-link :to={path:'register',query:{id:5,name:'lili'}}>註冊</router-link>
等同於:
router.push(‘/login?id=10&name=zs’)
router.push({path:'register',query:{id:5,name:'lili'}})
**注意:**在 Vue 例項內部,你可以通過 $router 訪問路由例項。因此你可以呼叫 this.$router.push。
this.$router.push(‘/login?id=10& name=zs’)
this.$router.push({path:'register',query:{id:5,name:'lili'}})
注意:jquery可以通過name或path來引入路由
2.params傳參
2.params傳參
路由:
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', component: login },// 這裡不傳入對應的引數(:/id) 重新整理頁面 引數會消失
{ name:'register', path: '/register' , component: register }
]
})
導航:
<router-link to="/login/12/ls">登入</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">註冊</router-link>
注意:params只能通過name來引入路由,path會undefined
jquery傳參和params傳參的區別
1.用法上:
1.上文已經提到query可以用name或path來引入
2.params必需要用name來引入,接收引數都是類似的,分別是this.
route.params.name。
2.位址列表現形式上:
query:
params:(注意:這裡的12和ls 對應的是/:id/:name 這兩個引數可以不寫 那麼就不會在位址列上顯示 不過重新整理頁面引數會消失 寫上引數重新整理頁面 引數不會消失)