VUE：组件间相互跳转、页面带参跳转

迷南。 2022-04-03 07:44 608阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

只是记录下用法：

从 A 页面跳转到 B 页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

如下写法：

A 页面跳转方式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

代码：

getdata() {
    
          var token = "我是参数值 ";
    
          // 参数组装
          let postData = this.$qs.stringify({
            name: $("#name").val(),
            word: $("#pwd").val()
          });
    
          this.$ajax({
            method: "post",
            url: this.GLOBAL.BASE_URL + "/gentle/first",
            data: postData
          }).then(res => {
            // this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
            this.$router.push({name: 'menuLeft', params: {token: token}, query: {token: token}})
            },err => {
              console.log("出错了："+err);
            }
          );
    
        }

B 页面接收：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2][]

代码重点就是一行：

var data = this.$route.query.token

运行效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3][]

[Link 1]: https://www.captainai.net/jiangyu1013/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220403/8e36d4968cd34ba09711bd24d48db229.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220403/60adbbd55b1b46af9dc7686c2e29d23c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2]: /images/20220403/c9e2bc72c8ec4fefb1f71e4576aeb864.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3]: /images/20220403/3450c37e4def4586a225a6312cd6a5eb.png