router-link标签的属性补充、页面跳转
router-link除了to=""属性还有其他属性:
-
tag属性:会按照我们想要的方式渲染成别的标签的样子
<router-link to="/home" tag="button">首页</router-link>
-
replace属性:在正常情况下vue使用history.pushState()来进行url的变更,但是有时我们不希望用户可以回退,所以要使用history.replace()来变更url,可以通过replace属性:
<router-link to="/home" tag="button" repalce>首页</router-link>
-
当点击一个按钮时,vue会给他添加一个router-link-active的class,这个可以用来设置当按钮被点击时的样式
通过代码修改路径
<template>
中:
<button @click="indexClick">首页</button>
<script>
中:
indexClick:function(){
//this.$router.replace('/home')
this.$router.push('/home')
console.log('homeClick')
}
这里的this指向的是当前的对象,$router是每一个对象都有的一个属性,调用push函数实现加载不同的组件