Vue配置——vue-router的详细配置

1. 初始化vue-router

首先安装vue-router，并创建名为router的文件夹，在下新建一个index.js
npm i vue-router

2. vue-router的简单配置

首先引入vue和vue-router
然后vue.use引入该插件
创建个常量并按一些规律来引入页面，也就是.vue文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './home.vue'  // 引入组件
import login from './login.vue'

Vue.use(VueRouter)

const routes = [
 {
   path: '/home',
   component: home
 },
 {
 	path: '/login',
 	component: login
 }
]

const router = new VueRouter({
   // 把常量routes放进来
   routes
})

// 导出router
export default router

在main或中文件中引入该文件并在new Vue中放入就完成了，这就是最简单router配置

3. 配置自己要求的router

在引入页面/组件时，可以按需引入组件，这样的话就不会第一次进入vue的项目时会引入全部的组件，导致首页白屏时间过长并且打包时也不会打包成一个js文件，可以需要显示哪个组件时，在引入。

// 还是已刚刚的例子修改
const routes = [
  {
  	// 每次进入默认进入该路由
  	path: '/',
  	// redirect属性，如果是默认路由，则跳转
  	redirect: '/home',
  	// 可以为路由进行命名,可以通过name进行路由跳转
  	name: '',
  	// 可以保存路由里的一些信息，相当于html里的meta元信息,你可以通过$route里来获取
  	meta: {
  	},
  	// 该路由下展示的子路由，必须在路由组件中写router-view标签才能展示
  	children: [
  		{
  			path: '',
  			component: ''
		}
  	]
  },
  {
    path: '/home',
    //component: home
    // 按需导入组件，app.js分块打包
    component: () => import('./home.js)
  },
  {
  	path: '/login',
  	//component: login
  	// 当然你也可以给component来实现路由组件的懒加载功能
  	component: (resolve) => {
            require(['./login'], resolve)
    },
  }
]

4.vue-router的公共配置

const router = new VueRouter({
	// 该属性用于去掉url中的哈希(/#/)
	mode: 'history',
	// 该属性在path路径加个基路径
	base: '/base/',
	// 给全局的router-link被激活时写样式用到的属性，
	linkActiveClass: '',

	linkExactActiveClass: '',
	// 保存进入过路由的滚动位置
	scrollBehavior (to, from, savedPosition) {
		to // 跳转的路由
		from // 从哪跳转的路由
		savedPosition // 如果该路由进入过并滚动，该参数会保存滚动的位置信息
		// 我们通常会这样设置
		if (savedPosition) {
			return savedPosition
		}
	},
	// 并不是所有的浏览器都支持vue形式的路由跳转，该属性不用设置自动生效就是为了让不同的浏览器支持vue形式的路由跳转。
	fallback: true,
	// 该方法会自动获取路径中的query参数，它会接收个参数是字符串
	parseQuery (query) {
	
	},
	// 该方法会自动获取路径中的query参数，它会接收个参数是对象
	stringifyQuery (obj) {
	
	}
}) 

5.路由缓存和路由切换动画

在上面中我们说了router-view标签，我们可以给router-view写一些属性

缓存全部路由

在router-view外包裹keep-alive
例： 
<keep-alive>
    <router-view></router-view>
</keep-alive>

缓存指定路由

使用  include
<keep-alive include="该路由的name名称">
  <router-view></router-view>
</keep-alive>
使用  exclude来指定该组件不需要缓存
<keep-alive exclude="该路由的name名称">
  <router-view></router-view>
</keep-alive>

部分路由缓存

使用 meta
在路由中添加下面属性  
    meta: {keepAlive: true // 缓存}
    meta: {keepAlive:false // 不缓存 }
    例：
    	 {
	          path:'/Distribution',
	          name:'Distribution',
	          component: Distribution,
	          meta: {keepAlive: true // 缓存}
		 }
然后在页面  
	<keep-alive >
		//当前进入的路由 meta里面 keepAlive为true时走这里
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    
    //当前进入的路由 meta里面 keepAlive为false时走这里 下面 if 判断进行了取反处理
    <router-view v-if="!$route.meta.keepAlive">
</router-view>

路由切换特效

<transtion name="swtich">  
	<router-view>router-view>
transtion>

然后再全局样式中定义切换的特效

/* 渐入渐出效果 */
.switch-enter-active, .switch-leave-active 
	transtion: opacity .5s
.switch-enter, .switch-leave-to 
	opacity: 0