1. 標籤跳轉：使用 <router-link> 建立 a 標籤 的形式
2. 程式設計式導航：使用 window.location.href 的形式

對於 vue-router

原文：程式設計式導航

一種是：

this.$router.go(num) //其中 num 是網頁向前或向後跳轉的級數（數字）

除了使用 <router-link> 建立 a 標籤來定義導航連結，我們還可以藉助 router 的例項方法，通過編寫程式碼來實現。

router.push(location, onComplete?, onAbort?)

// 字串
 

router.push('home')

// 物件
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有引數的 path：

例項：

func(id) {
	// 點選使用程式設計式導航跳轉到 圖文介紹頁面
	this.$router.push({name: "/home/item", params: { id }})
}

注意：區分 this.$route 和 this.$router 這兩個物件
其中：this.$route 是路由【引數物件】，所有路由中的引數，params、query 都屬於它
其中：this.$router 是一個【導航物件】，用它可以方便的使用 js 程式碼，實現路由的前進、後退、跳轉到新的 URL 地址

1. 最簡單的

this.$router.push("/home/item/"
 
 + id); // 跳轉到對應 id 子路由中

2. 傳遞物件

this.$router.push({ path: "/home/item/" + id });

3. 傳遞命名的路由

this.$router.push({ name: 'routes 中的路由名字', params: { id: id }})

4. 帶查詢引數

// 帶查詢引數，原來 /register/private 傳參變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})