vue中 通過路由進行頁面跳轉

一.使用 標籤實現路由開啟 (宣告式導航)：

router-link標籤會自動渲染成a標籤，
該元件的屬性有：

to 、 tag、target、 active-class、exact-active-class、exact 、event 、 replace、 append

1. to（必選引數）指定要跳轉的路由路徑：型別string/location

<!--直接寫對用的路由名-->
<router-link to="/about">About</router-link>

<!--可以寫物件  根據path路徑指定跳轉-->
<router-link :to="{path:'one'}">路由一</router-link>
<!--可以寫物件  根據路由命名指定跳轉-->
<router-link :to="{name:'Two'}">路由二</router-link>
 

<!--路由攜帶查詢引數 params方法-->
<router-link :to="{name:'Three',params: {number: '3' }}">路由三</router-link>
<!--使用path 帶路由引數params，params 不生效-->
<router-link :to="{path:'/three',params: {number: '3' }}">路由三</router-link>

在被跳轉到路由頁面中獲取傳遞引數

created(){
	//獲取params傳遞的引數
	console.log(this.$route.params.number)
}
 

<!--路由攜帶查詢引數 query方法-->
<!--query傳參會 位址列變成 /Four?number=4-->
<router-link :to="{path:'Four',query: {number: '4' }}">路由四</router-link>
<router-link :to="{name:'Four',query: {number: '4' }}">路由四</router-link>

改變地址拼接傳遞引數

在被跳轉到路由頁面中獲取傳遞引數

created(){
	//獲取query傳遞的引數
	console.log(this.$route.query.number)
}
 

2. tag：型別: string 可以指定當前標籤渲染為其他某種標籤,預設值: “a” ,

<!--tag屬性 會指定渲染標籤-->
 <router-link to="/about">About</router-link>
<router-link to="/about" tag='div'>About</router-link>
<router-link to="/about" tag='title'>About</router-link>
<router-link to="/about" tag='abbr'>About</router-link>

這是前端渲染 預設為a標籤

3. target 屬性規定在何處開啟連結文件 預設值_self:在相同的框架中開啟被連結文件 _parent:在父框架集中開啟被連結文件。 _top:在整個視窗中開啟被連結文件。 _blank:在新視窗中開啟被連結文件 (只有tag=“a"模式下 target=”_blank" 屬性才會生效。)

4. active-class 型別: string 預設值: “router-link-active” 設定 連結啟用時使用的 CSS 類名。預設值可以通過路由的構造選項 linkActiveClass 來全域性配置。

5. exact-active-class 型別: string 預設值: “router-link-exact-active” 配置當連結被精確匹配的時候應該啟用的 class。注意預設值也是可以通過路由建構函式選項 linkExactActiveClass 進行全域性配置的

6. exact 型別: boolean 預設值: false按照這個規則，每個路由都會啟用< router-link to="/" >！想要連結使用 “exact 匹配模式”，則使用 exact 屬性

7. event 型別: string | Array< string > 預設值: ‘click’ 宣告可以用來觸發導航的事件。可以是一個字串。

8. replace 型別: boolean 預設值: false 設定 replace 屬性的話，當點選時，會呼叫 router.replace() 而不是 router.push()，於是導航後不會留下 history 記錄。

9. append 型別: boolean 預設值: false 設定 append 屬性後，則在當前 (相對) 路徑前新增基路徑

二.可以藉助 router 的例項方法，通過編寫程式碼來實現 (程式設計式導航)：

在 Vue 例項內部，你可以通過 r o u t e r 訪 問 路 由 實 例 。 因 此 你 可 以 調 用 t h i s . router 訪問路由例項。因此你可以呼叫 this. router訪問路由實例。因此你可以調用this.router.push。

想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄，所以，當用戶點選瀏覽器後退按鈕時，則回到之前的 URL。
可檢視官方網址
連結
點選事件

<!--程式設計式導航-->
<div @click="goRouter">跳轉路由</div>

methods下的函式

methods:{
	goRouter(){
		// 字串
		this.$router.push('four')
		
		// 物件
		this.$router.push({ path: 'four' })

		// 命名的路由
		this.$router.push({ name: 'Four', params: { number: '123' }})
		//如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有引數的 path：
		this.$router.push({ path: '/four', query: { number: '123' }})
		
		const number = '1234'
		this.$router.push({ path: `/four/${number}`})
		
		//this.$router.replace 使用方法同this.$router.push  但是history棧中不會有記錄，點選返回會跳轉到上上個頁面

		//回退方法 這個方法的引數是一個整數，意思是在 history 記錄中向前或者後退多少步，類似 window.history.go(n)。
		this.$router.go(1)
	}
}

有時候需要在程式設計式導航中在瀏覽器中開啟一個新的頁面視窗 使用 $router.resolve 這種方法能夠實現新視窗開啟，

let routeData = this.$router.resolve({
	name: "Four",
	query:{number:'123456'}
});
window.open(routeData.href, '_blank');