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

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

阅读量：6086 次

发布时间：2019-06-20

本文共 768 字，大约阅读时间需要 2 分钟。

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

$router.push('/myroute')
- 跳转到对应的路径，可在页面中写对应的点击事件，然后执行对应的方法中写跳转，可在跳转前再写一些别的逻辑。

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

举例


    
    
     default export {    data() {        return {}    },    methods: {        logout () {            this.$router.replace('/logout');        }    }}

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