vue router 传参数的方式

打开新页面

1.标签实现新窗口打开

新页面打开home页

2.编程式导航：

openWin() {

 let id = this.id; 

 const { href } = this.$router.resolve({ name: `print_schedule`, params: { id: id } });

 window.open(href.href, "_blank");//这一步很重要,网上大部分方法不对

    },

hash模式注意

let routeUrl   = self.$router.resolve({

            path: "/monitor",

            query: {

              num: i,

              title:child.innerHTML

            }

          });

          window.open(routeUrl.href, "_blank");

需要采用query传值

跳转路由

字符串

字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：

···

this.$router.push("home");

···

命名路由

命名路由的前提就是在注册路由的地方需要给路由命名如：

命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标页面接收传递参数时使用params

 特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的

使用方法如下：

this.$router.push({ name: 'news', params: { userId: 123 }})

接收参数:{{this.$route.params.userId}}

查询参数

查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数而不能用name，目标页面接收传递的参数使用query。

注意：和name配对的是params，和path配对的是query

使用方法如下：

this.$router.push({ path: '/news', query: { userId: 123 }});

接受传递的参数：{{this.$route.query.userId}}

1.标签实现新窗口打开1.标签实现新窗口打开