vue-router笔记-未完。。。

vue-router: 为了实现单页面应用，产生的前端路由。匹配不同的url路径，进行解析，然后动态的渲出区域的html内容。
使用步骤
1. 安装
2. import引入
3. 注册插件-vue.use()
4. 配置[{path: ‘xx’, compontent: xxx}]
5. 初始化new Vue({router})
6. 使用路由

	* 链接<router-link> 下面是属性：
		* to
		* replace
		* append
		* tag
		* active-class
		* exat-active-class
		* event
	* 路由展示<router-view>

缓存路由组件<keep-active>是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染

动态路由匹配

	path: '/hi/:id
	<router-link :to="'/hi/'+'judy'">hi页面</router-link>
	<router-link :to="{name:'hi',params:{username:'judy'}}">hi页面</router-link>

query，params
1. Query方式传参和接收参数：this.router.push({path: ‘/xx’， query: {id:id}}) 接收参数this.route.query.id（相当于get请求，参数会在地址栏中显示）
2. Params方式传参和接收参数this.router.push({name: ‘xxx’, params:{id:id}})接收参数 this.route.params.id (相当于post请求，参数不会在地址栏中显示)

$router $route
1. Router为vueRouter实例，想要导航到不同 URL，则使用 $router.push 方法
2. $route为当前router跳转对象，里面可以获取 name 、 path 、 query 、 params 等

导航守卫

1. 全局导航钩子

   • 路由导航前置守卫：router.beforeEach((to,from,next) => {})
   • 路由导航后置守卫：router.afterEach((to,from) => {})
   • router.beforeResolve((to,from.next) => {})

2. 路由组件内钩子

   • beforeRouterEnter
   • beforeRouterUpdate
   • beforeRouterLeave

3. 单独路由独享组件

   • beforeEnter

完整的导航解析流程
xxxxxxxxxxxxxx
hash/history

• 使用model属性改变模式，默认为hash

• 这种 # 后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。hash值的变化会触发hashchange这个事件，通过这个事件我们可以知道hash值发生了哪些变化。

  • 将页面分享到app上，有的app不支持#

• history 模式不带 # 号，会有问题产生。

  • 访问二级页面，做刷新操作会出现404,需要后端配合配置apache或者nginx的url重定向，重定向到首页路由。