Vue router-link的使用

点击查看router-link详细解释
rotuer-link的to的几种使用方式

		1》to='/home'
		2》:to='"/home"'
		3》:to='{path:"/home"}'
		4》:to='{
			path:"/home",
			query:{userId:111}
		}'
		5》:to="{
			name:'user',
			params:{userId:111}
		}"

如何通过js方式进行跳转，有以下几种方式

*router.push
*router.replace
*router.go
*router.back
*router.forward

示例：点击按钮跳转至设置页面

<template>
	<div>
		<router-view></router-view>
		<router-link to="/">首页</router-link>
		<!-- <router-link to="/fav">收藏</router-link> -->
		<router-link :to='{path:"/fav",query:{userId:123}}'>收藏</router-link>
		<router-link to="/config" tag='h1'>设置</router-link>
		<button @click='toConfig'>跳转至设置页面</button>
	</div>
</template>

<script>
	export default{
		methods:{
			toConfig(){
				this.$router.push({
					path:"/config"
				})
			}
		}
	}
</script>
<style scoped>
		.router-link-active{
			color: red;
		}
</style>

router-link tag标签，router-link默认渲染出来是一个a标签，如果想渲染成其他标签，可以设置tag即可。类似tag=‘button’,这样的写法。

<router-link to="/config" tag='h1'>设置</router-link> //设置将会被渲染成一个h1标签

最后：router-link-active:默认触发的className。设置为某个颜色，即点击某个router-link的菜单后，该菜单即变为什么颜色