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

一. 路由传参

   使用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');