router-link标签学习

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