vue-route跳转

vue-route跳转方法有两种，第一种方法是使用内置的<router-link>组件，它会被渲染成一个 a 标签

<template >
    <div>
        <h1>首页</h1>
        <router-link to="/about>跳转到about</router-link>
</template>

　它的用法与通常的组件同样，to是一个prop，指定须要跳转的路径，固然也能够用v-bind动态设置。使用<router-link>在HTML5的History模式下会被拦截点击，避免浏览器从新加载页面。

<router-link>还有一些其余的prop，经常使用的有：

·tag:

　　tag 能够指定渲染成什么标签,好比<router-link to="/about" tag="li">;渲染的结果及时li标签,而不是a标签.
·replace:
　　使用replace不会留下History记录,因此导航后不能使用后退键返回上一个页面,如 <router-link to="/about" replace>

　　有时候跳转页面可能会在JavaScript里进行,相似于window.location.href,这时候能够用第二种跳转方法,使用router实例的方法.好比在 about.vue里,经过点击事件跳转:

//about.Vue
		<<template>
			<div>
				<h1>介绍页</h1>
				<button @click="handleRouter">跳转到user页面</button>
			</div>
		</template>
		<script>
			export default{
				methods:{
					handleRouter(){
						this.$route.push('/user/123')
					}
				}
			}
		</script>

　　

$route还有一些其余的方法：
·replace:
　　相似于<router-link>的replace功能，它不会向History添加新的记录，而是替换点。如：this.$route.replace('/user/123')
·go
　　相似于window.location.go(),在History向前或者后退多少步，参数是整数，如：
　　//后退1步
　　this.$route.go(-1);
　　//前进2步
　　this.$route.go(2)