vue-router中参数传递 + 编程式导航 + beforeRouteEnter

第一部分: vue-router参数传递

转自http://www.cnblogs.com/zhuzhenwei918/p/6916012.html

通过router-link我们可以向路由到的组件传递参数，这在我们实际使用中时非常重要的。

　

路由：

   {
      path:"/DetailPage",
      component: DetailPage,
      name: "详情页"
    },

 

 

router-link:

    <router-link :to="{path: '/DetailPage', query: {index: index}}">
      <div class="item-img">
　　　　　<p>路由<p>
      </div>
    </router-link>

 

 

 

DetailPage页面：

 <p>{{$route.query.index}}</p>

 

即： 在DetailPage页面我们可以通过$route.query.index 来获取到router-link中的值，因为router-link使用的时v-bind:，所以我们传递的index: index中的值index是可以变化的，即动态传递。

这样的结果是在路由切换时，在url中出现查询字符串即  localhost:8080/#/DetailPage?index=0

 

 

这是在template中获取，如果需要在js中获取，使用 this.$route.query.index 即可获取。

 

 

如下：

<router-link :to="{path: '/commodity/payment/editAddress', query: {
            id: item.id,
            name: item.name,
            contact: item.contact,
            address: item.address
            }}">
              <div class="address-info">
                <div class="name-contact">
                    <span class="name">{{item.name}}</span>
                    <span class="contact">{{item.contact}} </span>
                </div>
                <div class="address">{{item.address}}</div>
              </div>
          </router-link>

即通过查询字符串，我们可以传递很多信息。

 

在js中的使用如下：

  export default {
    data: function () {
      return {
        name: this.$route.query.name,
        contact: this.$route.query.contact,
        address: this.$route.query.address
      }
    },

 

 

第二部分： 编程式导航

　　在vue-router中单独介绍了编程式导航，之前看了文档，不知道其作用是什么，但是在实际项目中遇到了问题，所以才又发现他的作用，这里特地记录。

　　

背景： 用户在修改收货地址页面点击，修改完成之后，页面不动！ 必须要手动返回，所以，这时就需要路由了。

 

方法如下：

 this.editAddress(editedAddress).then(function () {
          alert("修改成功！");
          that.$router.go(-1);
        });

即： 在editAddress，定义在actions中的方法（返回一个promise），当resolve的时候，就alert成功，然后使用this.$router.go(-1)，即返回上一个页面。 

这里使用that，是因为在之前我赋值 var that = this 在内部获取this获取不到，会报错，需要注意。

 

　　首先我们看看什么是编程式导航。

　　也就是说，当我们使用 router-link 连接时，相当于调用了 router.push() ， 即将访问页面、路由看做是入栈，在点击返回按钮时，就是出栈，这样就很好理解了。  

　　router.push()的参数可以是一个字符串，也可以是一个描述地址的对象：

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

 

 

注意：在传递参数/值方面， 使用router.push({path: ”, query: “”});这种形式来传递值是非常方便的。

　　

　　

router.replace()

　　和router.push()不同，使用router.push()会将一个访问记录push到url中，所以再退回了的时候一定会回到这里，而router.replace()不是添加一个新的进入，而是替换栈顶元素，这样，在返回的时候，就会返回到栈顶元素的下面一个。

 

 

 

router.go()　

　这个方法的参数是一个整数，即前进或后退路由的多少步，类似于window.history.go(n)。 举例如下：

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

 

 

 

 

 

 

第三部分： 坑

　　我们知道，在一般的.vue文件中， this指向的时Vue实例，所以我们可以使用this.$router等方法，但是在store下的js文件中，this指向的就是我们普通所说的this了，所以使用this.$router一定是会出错的，所以之前一直不知道怎么解决，而处理的办法是使用promise, 即在action中使用promise，当成功时，又回到了 .vue 页面，然后就可以使用this.$router定位到我们想要的页面了。 但是这总归是一种绕过问题的方法，是不可取的，所以，这时需要做的就是 stackoverflow 上去搜索了。  不出意料， 我们可以看到问题如下：

https://stackoverflow.com/questions/40736799/how-to-navigate-using-vue-router-from-vuex-actions

　  

　　./router就是我们在src下的router文件，实际上是./router/index.js的省略。

---

 

 

 

 

 

beforeRouteEnter 

 

beforeRouteEnter (to, from, next) { 
　　console.log(from.path); 
　　next();
},

 

通过这个钩子函数，我们就可以获取到相关的路由了。

 

更多看这里。。。 https://router.vuejs.org/en/advanced/navigation-guards.html

 

 

这里非常重要的一点就是vue-router中beforeRouterEnter 的时间是早于vuex中的create的，所以，我们可以根据路由信息进行判断。