vue + iview 项目 + 源码 + 项目图片 + 部分路由官网精简

毒牙君 If you don’t work hard, who will help you.

自己写的项目源代码：https://github.com/dyJunZou/iviewWorld 项目面向的是初学者和想要自己大项目没有点思路的程序猿。下面的讲解，主要讲Vue-router官网的讲解精简了一下，如有不好的地方，可以指出来，谢谢！
项目图片：
[图片]




vue具有RESTful模式的路由。
RESTful作为一种架构风格，是一种设计风格而不是一个标准，只提供了一组设计原则和约束条件，它主要用于客户端和服务器端交互的桥梁。基于这种风格设计的应用可以更简洁、更有层次、更易于实现缓存等机制。

Vue的路由vue-router@3.0+

vue-router在vue中充当一个非常强大的角色。通过vue-router，vue可以更加方便的进行路由控制。开发者可以通过vue-router+Vue实现一个强大的单页面的应用。

Vue脚手架搭建项目的指令：vue init webpack 项目名称

基础路由的构成

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({  //实例化一个路由对象
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在它原有的基础上动一下，是的代码更加的简洁

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: () => import('@/components/HelloWorld')  // 改变引入的方式，减少引入组件的不便
    }
  ]
})

当然在很多时候路由都是公用的一个页面可以提供给不同的角色参数使用。

1. 可以通过组件封装；
2. 可以通过路由配置（动态路由）；

动态路由在相同路由之间切换是不会有history的变化所以 浏览器的返回键不会如愿以尝的返回你想返回的页面。

动态路由的变化可以通过watch监听得到，也可以通过vue-router的beforeRouteUpdate进行监听。

通过watch监听

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或

通过vue-router的beforeRouteUpdate进行监听

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // 当路由发生改变...
    // 不要忘记使用next()
  }
}

vue-router导航守卫经常用到的情况之一就是：登录权限验证和组件内部内容权限的验证，只有当用户满足一定的条件才能进行登录和进行部分内容的访问和操作。当然，如果路由route寻找不到页面的时候，应用通常需要返回404页面以告诉用户当前访问的页面不存在，这样你的应用的用户感知会更加的好。

通常使用通配符*来配置404页面的访问，当然通配符必须配置在所有路由的后面，以保证路由展示正确。

如果要配置500页面，可以使用$route.push({ path: '500' })进行访问

进阶版导航守卫

“导航”表示路由正在发生改变

vue-router总共有三个全局守卫，分别是：beforeEach, beforeResolve, afterEach。
beforeEach:

const router = new Router({ ... })
router.beforeEach((to, from, next) => {
	// to 将要进入的页面
	// from 即将离开的页面
	// next 必须配置的 next(false)路由跳转; next({ path: `跳转路由的path值` })
	// TODO
})

beforeResolve:

const router = new Router({...})
router.beforeResolve((to, from, next) => {
	// 跟beforeEach类似
	// 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
})

afterEach:

const router = new Router({...})
router.afterEach((to, from) => {
	// to 进入的页面
	// from 进入前的页面
})

组件内守卫

组件内守卫同样也有三个：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

• beforeRouteEnter

export default {
	name: '...',
	beforeRouteEnter(to, from, next) {
		// 不能使用this， 因为该组件在这时候还没有实例化
	}
}

• beforeRouteUpdate

export default {
	name: '...',
	beforeRouteUpdate(to, from, next) {
		// 能使用this，组件此时已经被实例化 
		//当前路由被复用的时候调用，例如：/user/:id => // /user/1 and /user/2
	}
}

• beforeRouteLeave

export default {
	name: '...',
	beforeRouteLeave(to, from, next) {
		// 即将离开当前路由时触发
		// 能使用this，组件此时已经被实例化 
	}
}

/**
--> 导航被触发。
--> 在失活的组件里调用离开守卫。
--> 调用全局的 beforeEach 守卫。
--> 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
--> 在路由配置里调用 beforeEnter。
--> 解析异步路由组件。
--> 在被激活的组件里调用 beforeRouteEnter。
--> 调用全局的 beforeResolve 守卫 (2.5+)。
--> 导航被确认。
--> 调用全局的 afterEach 钩子。
--> 触发 DOM 更新。
--> 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
*/

路由过渡

• transition

<transition name=`自己配置值`> // 有`slide`, `fade`等等
	<router-view></router-view>
</transition>

vue生命周期（在这个周期内，this都可以调用）

循序排列 开始 —> 结束

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed