vue-router

1、动态路由匹配

• 基本使用

  当我们对于不同ID各不相同的用户，都需要通过同一个组件来渲染，那么我们可以使用vue-router的路由路径使用动态路径参数来达到效果

  const router = new VueRouter({
  	router: [
  		//动态路径参数 以：开头
  		{ path:`/user/:id`, component:User }
  	]
  })

  现在，像/user/foo和/user/bar都将映射到相同的路由。

  一个“路径参数”使用冒号:标记。当匹配到一个路由时，参数值会被设置到this.$router.params,可以在每个组件里使用。于是，我们可以更新User的模板，输出当前用户的ID

  const User ={
  	template: '<div>User {{$route.params.id}}<div>'
  }

  你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

  模式	匹配路径	$route.params
  /user/:username	/user/evan	{ username: 'evan' }
  /user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

• 响应路由参数的变化

  当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

  复用组件时，想对路由参数的变化作出相应的话，你可以简单地watch(检测变化)$route对象

  const User ={
  	template: '...',
  	watch: {
          //to表示即将要进入的那个组件，from表示从哪个组件过来的
  		$route(to,from){
  			//对路由变化做出响应...
  		}
  	}
  }

  或者使用beforeRouterUpdate导航守卫

  const User = {
  	template: '...',
  	beforeRouteUpdate(to,form,next){
  		// react to route changes...
  		//don't forget to call next()
  	}
  }

  path可以用*表示匹配，也可以匹配任意开头的路径/user-*,并且会将*匹配到的部分保存在route.params.pathMatch,通常用于匹配404.

• 高级匹配

  vue-routr使用path-to-regexp作为路径匹配引擎.

• 匹配优先级

  同一个路径可以匹配多个路由，此时，匹配的优先级按照定义顺序

2、路由嵌套

假如User中，有自己的User组件，然后在User组件的模板中，有UserProfile组件,如果需要在嵌套的出口中渲染组件，需要在VueRouter的参数值中使用children

const router = new VueRouter({
	router: [
		{path:'user/:id' ,component: User,
		children:[
		{
			//当user/:id/profile匹配成功，
			//UserProfile 会被渲染在User的<router-view>中
			path: 'profile'
			component:UserProfile
		},
		{
			//当user/:id/profile匹配成功
			path:'posts'，
			component:UserPosts
		}
		]
		}
	]
})

3、完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

4.vue-router模式

1、Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据

2、History模式：

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入”mode: ‘history’”,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

5、使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏

方式2：this.$router.push(‘路由地址’)

方式3：<router-link to="路由地址"></router-link>