说说如何使用 vue-router 实现页面跳转

版权声明：如果喜欢，就点个赞呗 O(∩_∩)O~ https://blog.csdn.net/deniro_li/article/details/89043812

vue-router 有两种实现页面跳转的方法。

1 <router-link> 组件

<template>
    <div>
        <h3>首页</h3>
        <router-link to="/about">关于我们</router-link>
    </div>
</template>

效果：

渲染后的代码：

可以看出， <router-link> 组件会被渲染成 <a> 标签。

<router-link> 组件有以下这些属性：

属性	说明
to	需要跳转的路径。当然，我们也可以使用 v-bind 来实现类似功能。
tag	指定渲染成什么标签，默认渲染为 <a> 标签。
replace	使用替换模式，所以不会留下 History 记录。
active-class	当 <router-link> 与当前所对应的路由一致时，就会自动给当前元素设置一个名为 router-link-active 的 class。设置这一属性，可以修改默认的 class 名称（ router-link-active ）。设计导航栏时，可以利用该属性，实现高亮显示当前页面对应的导航菜单项 。

2 router 实例

有些场景，如果在 JavaScript 中实现页面跳转，这时就可以使用 router 实例来实现：

<template>
    <div>
        <h3>简介</h3>
        <button @click="clickByRouter">点击跳转</button>
    </div>
</template>

<script>
    export default {
        name: "about",
        methods:{
            clickByRouter(){
                this.$router.push('/article/321')
            }
        }
    }
</script>

效果：

$router 还定义了以下方法：

方法	说明
replace	类似 <router-link> 组件的 replace 属性功能。
go	类似 window.history.go()，即可以在浏览器的历史记录中向前（正数）或向后（负数）多少步。