打開新頁面
1.<router-link>標(biāo)簽實現(xiàn)新窗口打開
<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新頁面打開home頁</router-link>
2.編程式導(dǎo)航:
openWin() {
?let id = this.id;?
?const { href } = this.$router.resolve({ name: `print_schedule`, params: { id: id } });
?window.open(href.href, "_blank");//這一步很重要,網(wǎng)上大部分方法不對
? ? },
hash模式注意
let?routeUrl???=?self.$router.resolve({
????????????path:?"/monitor",
????????????query:?{
??????????????num:?i,
??????????????title:child.innerHTML
????????????}
??????????});
??????????window.open(routeUrl.href,?"_blank");
需要采用query傳值
跳轉(zhuǎn)路由
字符串
字符串的方式是直接將路由地址以字符串的方式來跳轉(zhuǎn),這種方式很簡單但是不能傳遞參數(shù):
···
this.$router.push("home");
···
命名路由
命名路由的前提就是在注冊路由的地方需要給路由命名如:
命名路由傳遞參數(shù)需要使用params來傳遞舅列,這里一定要注意使用params不是query。目標(biāo)頁面接收傳遞參數(shù)時使用params
?特別注意:命名路由這種方式傳遞的參數(shù)把敞,如果在目標(biāo)頁面刷新是會出錯的
使用方法如下:
this.$router.push({ name: 'news', params: { userId: 123 }})
接收參數(shù):{{this.$route.params.userId}}
查詢參數(shù)
查詢參數(shù)其實就是在路由地址后面帶上參數(shù)和傳統(tǒng)的url參數(shù)一致的榨惠,傳遞參數(shù)使用query而且必須配合path來傳遞參數(shù)而不能用name,目標(biāo)頁面接收傳遞的參數(shù)使用query赠橙。
注意:和name配對的是params,和path配對的是query
使用方法如下:
this.$router.push({ path: '/news', query: { userId: 123 }});
接受傳遞的參數(shù):{{this.$route.query.userId}}
1.<router-link>標(biāo)簽實現(xiàn)新窗口打開1.<router-link>標(biāo)簽實現(xiàn)新窗口打開