vue路由参数 及 跳转方式

最近在写路由的时候会忘记，在这里记个笔记吧。

一、路由传参

路由可在跳转的时候传参。有两种传参的方式：

1. query：它的参数，是拼接在url后面的

http://localhost:8080/#/test?name=zm&age=18

                this.$router.push({
                    path: '/test',
                    query: {
                        name: 'zm',
                        age: 18
                    }
                })

参数的获取：

            let query = this.$route.query;
            console.log(query); 

            {name: "zm", age: 18}

2. params：它的传参，是被隐藏的。且当使用params 传参的时候，必须通过name属性跳转。

http://localhost:8080/#/test 

                this.$router.push({
                    name: 'test',
                    params: {
                        name: 'zm',
                        age: 18
                    }
                })

参数的获取：

            let params = this.$route.params;
            console.log(params);
            
           {name: "zm", age: 18}

二、路由跳转

1. this.$router.push
   跳转到不同的url，它会向history中添加一个记录，点击后退会返回到上一个页面。

2. this.$router.replace
   同样是跳转到指定的url，但是它不会向history里面添加新的记录。
   点击返回，会跳转到上个有记录的页面。

3. this.$router.go(-1)
   相对于当前页面，向前跳转一个页面,类似 window.history.go(-1);

4. this.$router.resolve()
   打开新页面

                const route = this.$router.resolve({
                    name: 'test',
                });
                window.open(route.href);