现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。

父组件中：

methods：

方案一：

getDescribe(id) {

// 直接调用$router.push 实现携带参数的跳转

this.$router.push({

path: `/describe/${id}`,

})

方案一，需要对应路由配置如下：

{

path: '/describe/:id',

name: 'Describe',

component: Describe

}

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({

name: 'Describe',

params: {

id: id

}

})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{

path: '/describe',

name: 'Describe',

component: Describe

}

子组件中: 这样来获取参数

$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({

path: '/describe',

query: {

id: id

}

})

对应路由配置：

{

path: '/describe',

name: 'Describe',

component: Describe

}

对应子组件: 这样来获取参数

$route.query.id

这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是

$router 这很重要~~~

模式

vue-router中的模式选项主要在router实例化的时候进行定义的，如下

const router = new VueRouter({

mode: 'history', // 两种类型history 还有 hash

routes: routes // 可以缩写成routes

})

有两种模式可供选择，history 和 hash，大致对比一下，

模式

优点

缺点

hash

使用简单、无需后台支持

在url中以hash形式存在，不会传到后台

history

地址明确，便于理解和后台处理

需要后台配合

hash模式对于后台来讲就是一个url，因为地址中的hash值是不会传到后台的，所以服务器端做一个根地址的映射就可以了。

history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。或者采用模糊匹配的方式进行映射。

除此之外，history模式下，如果后端不是一对一的进行映射，而是模糊匹配的话，那么就要注意一下404的情况了。这个时候就需要在前端router中定义404页面了。

404路由的定义

由于router本身的匹配是从上到下的，如果在前面找到了匹配的路由，就跳转了。因此可以直接在最后添加404的路由，如下

let routerConfig = [{

path: '/pages',

component: App,

children: [{

path: 'demo/step1/list',

component: coupon,

name: 'coupon-list',

meta: {

title: '红包'

}

}]

}, {

path: '*',

component: NotFound,

name: 'notfound',

meta: {

title: '404-页面丢了'

}

}]

在前面匹配不到的时候，* 代表全部，就是都指向404页面

路由钩子

路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的，靠。。好拗口啊。

总体来讲vue里面提供了三大类钩子

1、全局钩子

2、某个路由独享的钩子

3、组件内钩子

全局钩子

顾名思义，全局钩子全局用，使用如下

const router = new VueRouter({

mode: 'history',

base: __dirname,

routes: routerConfig

})

router.beforeEach((to, from, next) => {

document.title = to.meta.title || 'demo'

if (!to.query.url && from.query.url) {

to.query.url = from.query.url

}

next()

})

router.afterEach(route => {

})

某个路由独享钩子

就像说的一样，给某个路由单独使用的，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。如下

const router = new VueRouter({

routes: [

{

path: '/foo',

component: Foo,

beforeEnter: (to, from, next) => {

// ...

},

beforeLeave: (to, from, next) => {

// ...

}

}

]

})

组件内钩子

首先看一下官方定义：

你可以在路由组件内直接定义以下路由导航钩子

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

路由组件!路由组件!路由组件!重要的事情说三遍，大家一定要注意这里说的是“路由组件”，而路由组件！== 组件，路由组件！== 组件，路由组件！== 组件！之前一直没注意这点，然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。

我们先来看一下什么是路由组件？

路由组件：直接定义在router中component处的组件

也就是说router中定义的入口vue文件之外的组件，是没有钩子函数的，也就不用说使用了。但是如果你使用了并不会报错，只是没反应。(本想画个图的，太懒了。。。自己理解理解吧，很好理解的)

这里再回头看下这个路由内钩子是怎么用的，很简单和data、method平级的方法

beforeRouteLeave(to, from, next) {

// ....

next()

},

beforeRouteEnter(to, from, next) {

// ....

next()

},

beforeRouteUpdate(to, from, next) {

// ....

next()

},

computed: {},

method: {}

三种路由钩子中都涉及到了三个参数，这里直接上官方介绍吧

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

tips:

beforeRouteEnter是新进入的一个路由，比如进入/login登录界面，会触发beforeRouteEnter这个钩子；

而beforeRouteUpdate是路由更新时触发，从主页进入登录界面不会触发这个钩子函数，一个父路由下的子路由跳转会触发这个钩子函数。