【vue回顾系列】15-Router的补充：参数传递、钩子函数（路由守卫）

前言

由于有官方文档，就只记录自己用到的部分了。详情移步官方文档。

参数传递方案

$route方案

$route是当前页面的内置路由信息对象，内置很多属性（这里就直接粘贴别人的说明）。

• path：字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news”；
• params：对象，包含路由中的动态片段和全匹配片段的键值对；
• query：对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == ‘yes’；
• router：路由规则所属的路由器（以及其所属的组件）；
• matched：数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象；
• name：当前路径的名字，如果没有使用具名路径，则名字为空；
• hash：当前路由的hash值；
• fullPath：完整的url路径，包含查询参数和hash；
  与$router的区别：router是vueRouter的实例，相当于一个全局路由对象，里面含有很多属性和子对象。

在watch中还可以做监听，当url改变了就会捕捉到。

watch: {
	$route() {
		const { fullPath, path, name, params, query, meta } = this.$route
	},
	'$route.path'() {}, // 还可以具体监听某个属性
}

使用params

router/index.js中

{
  path: '/playListInfo/:id',  // 如果后面接？号，表示参数可传可不传，如果没有传必须写？，否则组件直接无法访问，：是把参数拼接在url地址上，如果不写刷新一下参数就没了
  name: 'playListInfo',
  component: playListInfo
}

给编程式导航添加参数，例子

goToPlayListInfo(item) {
  this.$router.push({
    name: 'playListInfo',
    params: {
      id: item.id
    }
  });
}

也可以给声明式导航添加参数，例子

<router-link :to="{name:'Header', params:{id:'ccc'}}">
<router-link :to="/playListInfo/ccc">

使用的话就可以直接 this.$route.params.xx

url展示：http://localhost:8080/header/ccc

注意 ：

• 跳转方法最好以name的形式搭配params，如果使用path形式跳转。
• 如果路由有配置:xx，刷新不会丢参。如果没有配置的情况刷新会丢参，而且没传参数会报错。

使用query

给编程式导航添加参数

goToPlayListInfo(item) {
  this.$router.push({
    path: '/playListInfo',
    query: {
      id: item.id
    }
  });
}

也可以给声明式导航添加参数

<router-link :to="{path:'/header', query:{id:'ccc'}}">

然后可以直接这样使用this.$route.query.xx

url展示：http://localhost:8080/playListInfo?id=ccc

props方案

在router/index.js中配置开启参数传递

{
	path: '/user/:id?',
	component: User,
	props: true // 开启后会把参数值也就是例子中的id值传入组件
}

组件内接收

props: ['id'], // 组件用props接收

使用直接this.id

优点：

1. 用来解除一个用动态参数的URL与对应组件文件的绑定。组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的URL上使用，限制了其灵活性。可以通过传参将组件与路由解耦。
2. 不需要用$route来记录路由信息，也就不需要用钩子函数来监听动态参数。

---

钩子函数

函数参数说明

• to : 即将要进入的目标路由对象；
• from ：当前导航正要离开的路由；
• next() : 如果一切正常，则调用这个方法进入下一个钩子；

其中：

• next(false) ： 去掉导航
• next('/login') ： 跳转到对应的路由
• next(error)：执行一个error实例

---

全局

切换不同路由地址的时候触发，写在router/index.js

挂载在进入路由之前执行

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

挂载在进入路由之后执行

router.afterEach((to,from)=>{})

举个与路由meta配置的使用例子

{
    path: '/home',
    name: 'home',
    component: home,
    meta: {
        title: '首页', // 默认
    }
}

router.afterEach((to, from)=>{
	if (to.meta.title) {
    	document.title = to.meta.title
    } else {
    	document.title = '没有名称'
    }
})

---

组件

动态参数变化

beforeRouteUpdate (to,from,next){})

进入组件

beforeRouteEnter(to,from,next){})

注意：因为当钩子执行前，组件实例还没被创建，所以该钩子函数内部不能使用this；

离开组件

beforeRouteLeave(to,from,next){})

举个使用例子：

返回指定页面，比如从一个页面条到其他页面，且返回的时候，返回成其他的页面；

// 去到b页面
goToB () {
  this.$router.push({
  	name: 'b',
  	query: {
  		fromWhere: 'b'
  	}
  })
}

// b页面离开时
beforeRouteLeave(to,from,next){
	// 加这句防止进入死循环
	if (to.name === 'a') {
		return next()
	}
	if (this.fromWhere === 'b') {
		next ('/a')
	} else {
		next(false)
	}
})

---

单个路由配置

进入该路由

beforeEnter(to,from,next){})

例子

{
	path: "/user",
	component: User,
	beforeEnter((to,from,next)=>{
	    next();
	    if(localStorage.getItem("userIsLogin")){
	        next();
	    }
	})
}