vue之页面跳转和获取路径参数值

比眉伴天荒 2021-09-15 19:38 694阅读 0赞

一、获取路径参数

vue获取路径参数值的方式与原生js开发的网站、小程序获取参数值有点不一样，但总归来说，实质都是一样的。

底层的原理实现都是由原生js而来，小程序和vue开发的网站，它们获取参数值的方式其实都是在原生js做了一个封装，只不过封装之后的调用的语法要与它们自己系统结构一致。

下面分别介绍原生js实现获取路径参数值、小程序获取路径参数值和vue获取路径参数值：

1.原生js实现

可参考链接：[https://blog.csdn.net/Charles\_Tian/article/details/78704908][https_blog.csdn.net_Charles_Tian_article_details_78704908]

2.小程序实现

可参考链接：[https://blog.csdn.net/Charles\_Tian/article/details/80341986][https_blog.csdn.net_Charles_Tian_article_details_80341986]

3.vue.js实现

www.google.com/index/web?user\_id=666&nickName=itachi

然后在下一页面初始化的时候调用以下两句便可获取相对应的路径参数名的值：

this.$route.query.user\_id

this.$route.query.nickName

created() {
          // 获取链接参数user_id和nickName值，然后存进内存中
          this.user_id = this.$route.query.user_id;
          this.nickName = this.$route.query.nickName;
          console.log(this.user_id)//666
          console.log(this.nickName)//itachi
        },

console.log(this.$route.query.user\_id)//666

console.log(this.$route.query.nickName)//itachi

下面我来解释下，虽然具体底层原理到底怎么实现的不知道，但是应该跟原生js差别不会太大。

this指的是当前执行对象，在vue中不管是调用数据还是对象，都要用this，这里需要一提的是vue和小程序类似，this指的当前引用的对象，而往往从后台获取到的数据是一个闭包，有自己的作用域，this指代的不再是当前执行对象，所以有的时候会报错就是这个原因。建议使用var that = this;将this赋给that可免去没必要的bug，或者var \_this = this都可以；

然后就是$route，懂一点vue的人都知道这个是路由，与标签a的作用类似；

再就是query，顾名思义，这个是获取的是路径链接；

最后是参数名，接下来就没必要多解释了。

二、路由跳转的方式

1.声明式页内跳转

<router-link to='/a'>页面a</router-link>
    
    <router-link to='/a?userid=666&username=itachi'>页面a</router-link>

2.声明式页外跳转（新开页面）方式

<router-link to='/a' target='_blank'>页面a</router-link>
    
    <router-link to='/a?userid=666&username=itachi' target='_blank'>页面a</router-link>

注：router-link在页面渲染的时候是按照a标签的标准来的，即将router-link渲染成a标签

3.编程式页内跳转

this.$router.push({ path: '/a' });
    //带参数形式1
    this.$router.push({ path: '/a', query: {'userid': 666, 'username': 'itachi'}});
    //带参数形式2
    this.$router.push({ path: '/a?userid=666&username=itachi'});

4.编程式页外跳转（新开页面）方式

window.open('#/a', '_blank');
    //带参数方式
    window.open('#/a?userid=' + userid + '&username' + username, '_blank');//这里一定要注意路径

5.插件（iview插件，具体使用可参考：[https://blog.csdn.net/Charles\_Tian/article/details/81980409][https_blog.csdn.net_Charles_Tian_article_details_81980409]）式跳转方式

{
              title:'操作',
              key:"operate",
              align: 'center',
              render: (h, params) => {
                  return h('div', [
                      h('a', {
                          props: {
                              type: 'text',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px',
                              color:'#3a9987'
                          },
                          attrs:{
                            href:'#/a?userid=' + userid + '&username=itachi',
                            target:"_blank"
                          }
                      }, '用户列表'),
                      h('a', {
                          props: {
                              type: 'text',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px',
                              color:'#3a9987'
                          },
                          attrs:{
                            href:'#/b',
                            target:"_self"
                          }
                      }, '用户昵称')
                  ]);
            }
        }

[https_blog.csdn.net_Charles_Tian_article_details_78704908]: https://blog.csdn.net/Charles_Tian/article/details/78704908
[https_blog.csdn.net_Charles_Tian_article_details_80341986]: https://blog.csdn.net/Charles_Tian/article/details/80341986
[https_blog.csdn.net_Charles_Tian_article_details_81980409]: https://blog.csdn.net/Charles_Tian/article/details/81980409