对router-link:to和$router.push的理解

• <router-link :to='/myroute'>
  

  跳转到我的路由

  </router-link>
  

  • 使用router-link方式跳转，会在页面渲染的时候就加载对应的路由
  • 比起直接写<a href = ''>的方式的优点：不管是h5的history还是hash模式，切换的时候很方便；会默认阻止浏览器的默认事件；写路径的时候不用写基路径了。

• $router.push('/myroute')
  

  • 跳转到对应的路径，可在页面中写对应的点击事件，然后执行对应的方法中写跳转，可在跳转前再写一些别的逻辑。

• 两种方式对于跳转来说是相同的。均可以实现。

• 举例

<template>
   // router-link :to方式
   <router-link :to="/">跳到首页</router-link>
   //router.push方式
   <router-link :to='#' @click.native="logout">退出登录</router-link>
</template>
<javascript>
default export {
    data() {
        return {}
    },
    methods: {
        logout () {
            this.$router.replace('/logout');
        }
    }
}
<javascript>

• 注意点
  • 退出登录不能直接使用router-link方式，因为router-link会在页面加载时就渲染，所以会在页面加载的时候直接退出，无法进入具体的应用；
  • 使用@click.native而不是@click的原因：vue官方库中有自己的事件处理机制，router-link会默认阻止浏览器的默认行为，可以使用.native来触发原生事件。
• 有啥不清楚的可以留言`

转载于:https://my.oschina.net/yxmBetter/blog/1522793