VueRouter官方文档学习笔记_vue-router官方文档-优快云博客

Vue Router

（1）动态路由匹配
路由跳转传参
路由变化监听
多对一的路由-组件匹配
（2）嵌套路由
子路由的完整路径是当前路径加上所有父路由的嵌套路径
（3）编程式导航（操作History）

// 动态命名路径路由

	router.push({ name: 'user', params: { userId }}) // -> /user/123
	router.push({ path: `/user/${userId}` }) // -> /user/123

// 带查询参数，变成 /register?plan=private

	router.push({ path: 'register', query: { plan: 'private' }})
	router.replace

//路由替换：不向history 添加新记录

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

//路由历史跳转：向浏览器路由历史前进n（+）步，或者后退n（-）步

	router.go(n)

进阶：

（1）命名路由，给路由增加name属性，在页面中可以通过路由名称跳转。
使用名字跳转好处是将页面与配置解耦，如果路由路径发生改变可以直接改配置文件中对应名称的路由路径，而无需到页面里去改路由跳转路径

	router.push({ name: 'user', params: { userId: 123 } })

（2）路由组件传参：实现组件中 $ro u t e 调用解耦如果希望组件中不使用$ route,(将路由和组件解耦），可以通过路由组件设置prop属性将路由信息传入，在组件中以prop方式接收

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

（3）导航守卫
导航守卫按照路由导航过程分为三种：全局的，单个路由独享的，组件级别的
参数(params)和查询(query)的改变是不会触发导航守卫的，如果需要，可以通过监听$route对象或者使用beforeRouteUpdate组件内守卫
一般我们称的导航守卫是指全局前置导航守卫，局前置导航守卫（路由跳转拦截的钩子）接收三个参数

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

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

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

//案例:用户未能验证身份时重定向到 /login 的示例
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局解析守卫

通过router.beforeResolve 注册，该钩子在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后触发。

全局后置钩子

router.afterEach((to, from) => {
  // ...
})
路由跳转后需要执行的操作

路由独享的守卫：可以在指定路由跳转前触发的钩子，详细注册看官网。
组件内的守卫：可以在组件内部注册的路由钩子，在组件创建前触发，因此不能调用this
（4）路由元信息：路由组件的meta字段被称为路由元信息，

如何访问？
	首先，我们称呼 routes 配置中的每个路由对象为 路由记录。通过$route.matched 数组获得一个路由匹配到的所有路由记录（对于嵌套的路由的路由记录，包含了它和它所有父级路由记录，所以一个路由可以匹配多个路由记录）

实战操作：
1.route（路由信息对象）与router（路由实例）的区别

#	this.$route拿路由信息对象，一般用于获取当前所在路由信息，一般常用的是获取该对象上的query、params、等属性
#	this.$router路由实例，一般用于操作路由，提供了常规的路由操作api如：this.$router.push()/this.$router.go()/
this.$router.addRouter等路由路由跳转、编程式导航、动态添加路由等操作
总而言之，两者的区别一个是用于获取路由信息的，一个是用于操作路由的。