js跳转vue

2020-06-03 本文已影响0人回忆不死我们不散

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
父组件中：

<li v-for="article in articles" @click="getDescribe(article.id)">

methods：

方案一：

      getDescribe(id) {//   直接调用$router.push 实现携带参数的跳转        
              this.$router.push({          path: `/describe/${id}`,       
        })

方案一，需要对应路由配置如下：

   {     path: '/describe/:id',     
          name: 'Describe',    
          component: Describe  
     }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

       this.$router.push({          
            name: 'Describe',          
            params: {            id: id          }       
         })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

   {     path: '/describe',     
          name: 'Describe',     
          component: Describe  
     }

子组件中: 这样来获取参数

this.$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

    this.$router.push({          
      path: '/describe',          
      query: {            id: id          }       
     })

对应路由配置：

   {     
path: '/describe',     
name: 'Describe',    
 component: Describe 
  }

对应子组件: 这样来获取参数

this.$route.query.id

这里要特别注意在子组件中获取参数的时候是 $route.params 而不是$ router 这很重要~~~

（https://github.com/vuejs/vue-...）

tips
可能上面少了this 会误导新手直接使用 $route来获取，所以这边加上this

转自：cnblogs.com/plBlog/p/11815297.html

vue实现按回车键登录

首先在mounted中绑定监听事件

mounted(){
    //绑定事件
     window.addEventListener('keydown',this.keyDown);
  }

在写一个监听事件的方法

 methods:{
    keyDown(e){
        //如果是回车则执行登录方法
      if(e.keyCode == 13){
        this.login();
      }
    }
}

最后要销毁事件

    destroyed(){
        window.removeEventListener('keydown',this.keyDown,false);
  }

转自：http://www.imooc.com/article/301401?block_id=tuijian_wz

当前页面 Vue如何获取当前页面的url,获取路由地址

获取路由：redirect: router.currentRoute.fullPath
完整url可以用 window.location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params 例如：/user/:id → /user/2044011030 → this.$route.params.id
路由查询参数 this.$route.query 例如：/user/search?name=sf → this.$route.query.name

encodeURIComponent,encodeURI的使用以及在vue中用url传值的两种方式

参考：https://www.runoob.com/jsref/jsref-decodeuricomponent.html
https://blog.csdn.net/wanwan5856/article/details/79616949

一、问题发生场景

在vue中使用$route的query传值方式会发现值被转为一串不易读的字符，但是不影响从query参数中获取正确的原始的传值，这本来并没有引起我的注意。后来产品提了一个需求是某个页面必须在新标签页打开，搜了下vue好像没有提供这种方法，但是用window.open('#/urlxxx?fdn=' + fdn + '&page=interface')

可以满足需求，只是期间遇到问题：

因为$route.query已经帮我们自动编码了，我们平时使用时只需要写参数和值就好，在这里我就失去了警惕，直接写上了键值对，结果vue route进行跳转时url出错url的参数会自动抹掉结果跳转在只有‘？’符号前的路径的页面。把参数值使用encodeURIComponent编码后就可以解决这个问题了。

二、引出两个知识点

1，vue中使用 $route的query传的值会被自动通过encodeURIComponent转码，也就是显示在浏览器地址栏里那串不易读的字符。同样的在vue里使用$ route的query取值也会自动解码。断定是encodeURIComponent而不是encodeURI的原因是我传的值里有“/”而实际地址栏里没有。