router-link其他的属性

router-link的属性

to：用于指定跳转的路径

tag：可以指定之后渲染成什么标签

replace：不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中

active-class:当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

• 在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类。
• 但是通常不会修改类的属性，会直接使用默认的router-link-active即可

to

作用类似于a标签

<router-link to="aaa">按钮</router-link>

tag

想要变成什么标签就设定什么标签

<router-link to="aaa" tag="button">按钮</router-link>

这样就渲染出一个button标签的形式

replace

不保留历史记录，不给后退和前进

<router-link to="aaa" replace>按钮</router-link>

就在里面写一个replace即可，不用跟东西

active-class

<router-link to="aaa" tag="button">按钮</router-link>

这样在控制台中看的时候会发现button标签中多了一个router-link-active的class（这是个默认的class）

现在要是不想叫这个名字，就需要用active-class去重新起名

<router-link to="aaa" tag="button" active-class="lei">按钮</router-link>

<style>
    .lei{
        color:blue;
    }
</style>

这时button标签中的class就变为lei了。

在配置路由的js文件里该class名

找到配置路由的js文件，有个linkActiveClass属性去统一修改

const router = new VueRouter({
    
    
    //配置路由和组件之间的关系
    routes,
    linkActiveClass:"lei"
})

通过代码跳转路由

在App.vue 里面，也就是全局的vue里面去操作

<template>
//这里就没有router-link了
	<button @click="homeclick">首页</button>
	<button @click="aboutclick">内容</button>
</template>
<script>
    export default{
        name:'App',
        methods:{
            homclick(){
                //通过代码的方式来修改路径
                this.$router.push("/home)"//vue-router原码里会自动添加这个属性
                console.log('homeclick')
            },
            aboutclick(){
                this.$router.replace('/about')//还有这个方法
                console.log('aboutclick')
            }
        }
    }
</script>