vue-router|vue-router 如何在新窗口打开页面
1.
官方文档中说 v-link 指令被
2、编程式导航:
有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是
$router.push
$router.go
但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve,如下
seeShare(){
let routeUrl = this.$router.resolve({
path: "/share",
query: {id:96}
});
window.open(routeUrl .href, '_blank');
}
返回上一页:
1,点击返回上一页
methods:{
goback(){}
this.$router.go(-1)
}
这里传参可以使用query,也可以使用params,
query跟params的区别:
/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/data?id=1 /data?id=2 这里的 id 叫 query
当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。
这句话怎么理解呢?看下边:
如果你要使用params传参,那么你的路由页面index.js必须带上参数,如下
{
path: '/detail/:id/',
name: "detail",
component: detail//这个details是传进来的组件名称
}使用:
方法1:
如果你要使用query传参,那么你的路由页面index.js不用带上参数,如下
{
path: '/detail',//这里不需要参入参数,参见上面的params写法
name: "detail",
component: detail//这个details是传进来的组件名称
}使用:
方法1:
这里看方法3,4,其实是对应方法1,2的,也就是说使用query方法,可以与path和name共用,2个都可以,但是params只能对应name。
要是想获取参数值:各自的获取方法是:
query:this.$route.query.id,
params:this.$route.params.id,
顺便说一些参数是多个的情况:
{
path: '/detail/:id/:name',
name: "detail",
component: detail//这个details是传进来的组件名称
}
【vue-router|vue-router 如何在新窗口打开页面】那么跳转写法:this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
query的写法参考上面。
query跟params,前者在浏览器地址栏中显示参数,后者则不显示。
推荐阅读
- 任时光绽放成六月繁花
- 我从来不做坏事
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 樱花雨
- 如何寻找情感问答App的分析切入点
- 拍照一年啦,如果你想了解我,那就请先看看这篇文章
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 人如果没梦想,和咸鱼有什么区别(自媒体时代把握住就能咸鱼翻身)
- 如何在Mac中的文件选择框中打开系统隐藏文件夹