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' }})