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)