vue-router 动态路由传参 & 打开新窗口页面

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41014370/article/details/90769149

一. 路由传参

   使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。

   使用query方法,就没有这种限制,直接在跳转里面用就可以。

   对比1:  query方法,可以与path和name共用,params只能对应name。

                query & params,前者在浏览器地址栏中显示参数,后者则不显示。

获取参数值:query:this.$route.query.id;params: this.$route.params.id

如果你要使用params传参,那么你的路由页面index.js必须带上参数,如下:
{
   path: '/detail/:id',
   name: "detail",
   component: detail
}
使用: 
方法1:<router-link :to="{ name: 'detail', params: { id: 123 }}">点击按钮</router-link>
方法2:this.$router.push({name:'detail',params: { id:123 } })
页面url显示结果是:http://localhost:8081/#/detail/123


如果你要使用query传参,那么你的路由页面index.js必须带上参数,如下:
{
   path: '/detail',//这里不需要参入参数,参见上面的params写法
   name: "detail",
   component: detail
}
使用: 
方法1:<router-link :to="{ name: 'detail', query: { id: 123 }}">点击按钮</router-link>
方法2:this.$router.push({name:'detail',query:{id:123}})

方法3:<router-link :to="{ path: 'detail', query: { id: 123 }}">点击按钮</router-link>
方法4:this.$router.push({path:'detail',query:{id:123}})
页面url显示结果是:http://localhost:8081/#/detail?id=123

二. 打开新窗口页面

1. <router-link>标签实现新窗口打开:

官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link>不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持  target="_blank" 属性的(tag="a"),如下:

<router-link target="_blank" :to="{path:'/home',query:{ id:'1' }}">新页面打开home页</router-link>

2. 编程式导航:

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve,如下:

let routeUrl = this.$router.resolve({
     path: "/share",
     query: {
       id:96
     }
});
window.open(routeUrl.href, '_blank');

 

展开阅读全文

没有更多推荐了,返回首页