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,如下
seeShare(){
let routeUrl = this.$router.resolve({
path: "/share",
query: {id:96}
});
window.open(routeUrl .href, '_blank');
}
返回上一页：
1，点击返回上一页
<button @click="goback">goback</button>
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：<router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link>
方法2：this.$router.push({name:'details',params:{id:123}})
页面url显示结果是：http://localhost:8081/#/details/123
如果你要使用query传参，那么你的路由页面index.js不用带上参数，如下
{
path: '/detail',//这里不需要参入参数，参见上面的params写法
name: "detail",
component: detail//这个details是传进来的组件名称
}
使用：
方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮</router-link>
方法2：this.$router.push({name:'details',query:{id:123}})
方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">点击按钮</router-link>
方法4：this.$router.push({path:'details',query:{id:123}})
页面url显示结果是：http://localhost:8081/#/details?id=123
这里看方法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是传进来的组件名称
}
那么跳转写法：this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
query的写法参考上面。
query跟params，前者在浏览器地址栏中显示参数，后者则不显示。
网友评论