vue——48-router 路由跳转

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

// 命名的路由 （类似 post 传参）
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private （类似 get 传参）
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' }})

component 模块引入方式

例：require.ensure()实现
const notFound = r => require.ensure([], () => r(require(’@views/common/404’)), ‘index’)
const login = r => require.ensure([], () => r(require(’@views/common/login’)), ‘index’)
const register = r => require.ensure([], () => r(require(’@views/common/register’)), ‘index’)
const main = r => require.ensure([], () => r(require(’@views/main’)), ‘index’)
const myWorks = r => require.ensure([], () => r(require(’@views/my/index’)), ‘my’)
const myAccountSetting = r => require.ensure([], () => r(require(’@views/my/account-setting’)), ‘my’)
const makeIndex = r => require.ensure([], () => r(require(’@views/make/index’)), ‘make’)

例：import()实现
const notFound = () => import(/* webpackChunkName: “index” / ‘@views/common/404’)
const login = () => import(/ webpackChunkName: “index” / ‘@views/common/login’)
const register = () => import(/ webpackChunkName: “index” / ‘@views/common/register’)
const main = () => import(/ webpackChunkName: “index” / ‘@views/main’)
const myWorks = () => import(/ webpackChunkName: “my” / ‘@views/my/index’)
const myAccountSetting = () => import(/ webpackChunkName: “my” / ‘@views/my/account-setting’)
const makeIndex = () => import(/ webpackChunkName: “make” */ ‘@views/make/index’)