router-link标签学习
1.指定跳转路由,to属性
<!--通过to来指定跳转路由-->
<router-link to="/home">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!--还可以带查询参数,变成/profile?ID=10-->
<router-link :to="{path:'/profile',query:{ID:10}}" tag="button"></router-link>
<!--在JS代码,等价于上面的效果
this.$router.push({
path:'/profile',
query:{
ID:10
}
})
-->
2.更改router-link渲染标签,tag属性
默认情况下vue的router-link会渲染成a标签,有时我们可能想将router-link渲染成其他标签,这时我们就可以使用tag来指定渲染的标签了。
<!--通过tag来指定渲染标签-->
<router-link to="/home" tag="button"></router-link>
3.修改路径(replace形式),replace属性
<!--replace,将使用router.replace()方法更改路径,而非router.push()-->
<!--这将无法用history.back()回退到上一浏览的页面,不会留下 history 记录,是直接的更改形式-->
<router-link to="/home" replace>Home</router-link>
4.添加形式跳转路由,append属性
<!--假如当前页面为/home,点击后将变成/home/my-->
<router-link :to="{path:'my'}" append>Home</router-link>
5.获取to属性中附带的查询参数
在对应组件中,通过$route.querys获取传递的查询参数
this.$route.query.ID