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)