router-link属性 tag replace active-class go

vue-route跳转方法有两种，第一种方法是使用内置的<router-link>组件，它会被渲染成一个 a 标签

<template >

    <div>

        <h1>首页</h1>

        <router-link to="/about>跳转到about</router-link>

</template>

它的用法与一般的组件一样，to是一个prop，指定需要跳转的路径，当然也可以用v-bind动态设置。使用在HTML5的History模式下会被拦截点击，避免浏览器重新加载页面。

<router-link>还有一些其他的prop，常用的有：

tag
　　tag 可以指定渲染成什么标签,比如;渲染的结果及时li标签,而不是a标签.
　　
replace
　　使用replace不会留下History记录,所以导航后不能使用后退键返回上一个页面,如

有时候跳转页面可能会在JavaScript里进行,类似于window.location.href,这时候可以用第二种跳转方法,使用router实例的方法.比如在 about.vue里,通过点击事件跳转:

//about.Vue

        <<template>

            <div>

                <h1>介绍页</h1>

                <button @click="handleRouter">跳转到user页面</button>

            </div>

        </template>

        <script>

            export default{

                methods:{

                    handleRouter(){

                        this.$route.push('/user/123')

                    }

                }

            }

        </script>

类似于<router-link>的replace功能，它不会向History添加新的记录，而是替换点。如：this.$route.replace('/user/123')

active-class
　　当<router-link>对应的路由匹配成功时，会自动给当前的元素设置一个名为route-link-active的class，设置prop：active-class可以修改默认的名称，【类似导航栏时可以用】
·go
　　类似于window.location.go(),在History向前或者后退多少步，参数是整数，如：

　//后退1步
　　this.$route.go(-1);
　　//前进2步
　　this.$route.go(2)

原文链接：https://blog.youkuaiyun.com/weixin_43837268/article/details/100669396