一恩袱、在template中的常見寫法:
<router-link to="/recommend">
<button class="button">點(diǎn)擊跳轉(zhuǎn)</button>
</router-link>
二瓶堕、在js中設(shè)置跳轉(zhuǎn)(在方法中跳轉(zhuǎn)界面并傳參败砂,兩種方式:params 與 query):
有時(shí)候我們需要的是點(diǎn)擊按鈕跳出彈窗辨嗽,選擇判斷后進(jìn)行跳轉(zhuǎn)世落,我們常用.$router.push 跳轉(zhuǎn) 傳參:
<button @click = "func()">跳轉(zhuǎn)</button>
//js
<script>
export default{
methods:{
func (){
this.$router.push({name: '/order/page1',params:{ id:'1'}});
}
}
}
</script>
另有:
this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});
// path:'路由里配置的index.vue的路徑'
// params:{id:'1',name:'eva'} /query:{id:'5'} 需要傳遞的參數(shù)和值
路由傳參params 和query兩種方式的區(qū)別:
1、用法上的
剛才已經(jīng)說了糟需,query要用path來引入屉佳,params要用name來引入,接收參數(shù)都是類似的洲押,分別是this.route.params.name武花。
注意接收參數(shù)的時(shí)候,已經(jīng)是router了哦W缬铡髓堪!
2、展示上的
query更加類似于我們ajax中g(shù)et傳參,params則類似于post干旁,說的再簡單一點(diǎn)驶沼,前者在瀏覽器地址欄中顯示參數(shù),后者則不顯示争群。
三回怜、路由參數(shù)的取值:
{{this.$route.params.參數(shù)名}}
注意:接收參數(shù)的時(shí)候已經(jīng)是router了。