Vue-router(路由最优写法，路由守卫)

官方基础写法

理解版

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'
const HelloWorld = () => import('@/components/HelloWorld')
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

vue的异步组件，require()方法。（按需加载）

好处：vue的一种按需加载的方法，点击的时候才会请求，减少首页加载时间。

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld'], resolve),
    }
  ]
})

vue的异步组件+webpack的ensure()方法。（按需加载+js打包分离）

好处：vue的一种按需加载的方法，webpack的ensure()方法实现js打包分离，每个组件单独打包，加载的时候文件不会太大。

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

const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

最优官方，懒加载和打包分离代码。（【官方推荐】按需加载+js打包分离）

vue官方的一种方法，import()方法和增加webpackChunkName。
1.需要安装 cnpm i -s @babel/plugin-syntax-dynamic-import
2.配置webpack，在webpack-base-conf.js的output加入chunkFilename: ‘[name].js’

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

Vue.use(Router)

export default new Router({
  routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
     }
  ]
})

Vue-router

实例化时会初始化 this.history,不同 mode 对应不同的 history
不传入mode时默认为hash，hash对应HashHistory来进行实例化 HashHistory
具体实现是调用了window.location

Vue-router路由守卫

vue create mz//创建项目
npm i-S vue-router // 安装vue router

//在src 下创建 router.js
import Vue from 'vue'
import Route from 'vue-router'
import HelloWorld from './components/HelloWorld'

Vue.use(Route) // 通过Vue.use来使用Route 完成Router的初始化
const routes = [
// 定义了路由的配置 至少包含俩个参数
// 第一个是 path 就是你对应的路由是什么
// 第二个是component 当前这个路由对应的组件是什么
    { path:'/hello-world',component : HelloWorld }
]
//最后我们通过new Route来初始化整个vue-router
const router = new Route({
    routes
})
// 抛出 在main.js中引入
export default router

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入router

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router // 将这个router 直接传入到Vue实例化当中去 
}).$mount('#app')
// 这样我们就直接可以使用 this.$router 和 this.$route 来获取路由对象

重点

整个页面只包含一个组件就是App.vue，App.vue中只包含一个组件就是,会根据route的配置来加载不同的组件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
 
}
</script>

<style>

</style>

路由守卫

所谓路由守卫其实就是路由的钩子函数和组件的生命周期是一个道理

全局守卫

所谓全局守卫就是指每一个路由都会触发的钩子函数,他写在vue-router当中，没有办法获取vue的实例
如果在组件当中可以使用this.$vue-router来写
路由守卫在组件生命周期之前

//当路由进入之前会触发的这样一个事件
// to表示到哪里去 from 就是你从哪个路由来
router.beforeEach((to,from,next) => {
	console.log('beforeEach',to,from)
	next()
})
//vue 2.5 之后新增的一个新的特性，他可以在路由被解析之前被调用
router.beforeResolve((to,from,next) => {
	console.log('beforeResolve',to,from)
	next()
})
// 当路由进入之后会触发的一个事件
router.afterEach((to,from,next) => {
	console.log('afterEach',to,from)
	next()
})

局部守卫

局部守卫和生命周期一样写在生命周期函数里面
在组件的局部路由当中是不能获取this实例的，因为他是在beforeCreate之前

beforeRouteEnter((to,from,next) => {
	console.log('beforeRouteEnter',to,from)
	next()
})
//表示当前路由发生了变化  更新是使用
beforeRouteUpdate((to,from,next) => {
	console.log('beforeRouteUpdate',to,from)
	next()
})
// 表示当前组件离开了
beforeRouteLeave((to,from,next) => {
	console.log('beforeRouteLeave',to,from)
	next()
})

路由元信息

通过 meta 定义路由元信息

const routes = [
	{ path: '/a',component:A,meta: { title: 'Custom Title A'} }
]

使用 meta 信息动态修改标题

router.beforeEach ((to,from,next) => {
	console.log('beforeEach',to,from)
	if(to.meta && to.meta.title) {
		document.title = to.meta.title
	} else {
		document,title = 'defaule title'
	}
	next()
})

vue-router API（权限初始化）

使用 router.addRoutes 动态添加路由
核心就是利用addRoutes
可以来用做权限初始化

// 加一个button 加点击事件 
import B from './B'
addRoute() {
	this.$router.addRoutes([{
		path:'/b',component:B,metaL{ title:'Custom Title B' },
	}])
}

//此时可以访问到B组件
<router-link to="/b">to B</router-link>