Vue.js中的路由

路由分为前端路由和后端路由，使用前端路由的优点在于其切换会更加平滑，所以想要更好的切换效果的话就需要使用到前端路由

路由配置文件router.js的设置

import Vue from 'vue'
import Router from 'vue-router'		//引入所需方法
import Home from './views/Home.vue'		//引入首页页面或组件

Vue.use(Router) 
//给Vue绑定Router方法，会自动添加两个方法:$router(路由上一些方法) $route(路由上属性)

export default new Router({
  mode:'history',        	 // 开启history模式
  linkExactActiveClass:'active-exact',		// 简化激活状态的class类名
  linkActiveClass:'active',			// 简化激活状态同类class类名
  routes: [			// 放置所有的路由信息(每个路由的路径、名称、所使组件等)
    {
      path: '/',		// 路径
      name: 'home',		// 名称(其实可不要)
      component: Home		// 使用的组件
    },
    {
      path: '/about',		// 路径
      name: 'about',		// 名称
      component: () => import( './views/About.vue')
    }				// 在该组件中使用函数是为了懒加载，减少首页加载量
  ]
})

路由模式：有hash模式与history模式；不设置默认为hash模式；区别为hash模式会在地址栏中添加#符号，历史模式则没有
历史模式的原理是使用H5中的history方法，借助其封装方法来实现history模式功能

关于linkExactActiveClass与linkActiveClass
linkActiveClass：当链接被激活时触发的状态，会在相应组件上添加router-link-active类名，可通过该类名设置激活后的状态显示，可修改简化该class名称，修改方式如上方代码；非精准匹配，当组件路由路径等于当前页面路径或包含当前页面路径时触发
linkExactActiveClass：精准匹配，当前显示页面路径与该组件路由路径完全一致时触发，自动添加router-link-exact-active类名

如：当页面路由指向/about/aaa路径时，该路径对应的路由组件本身会被添加router-link-exact-active类名，而与之关联的/路径与/about路径则会添加router-link-active类名；在上方代码中有类名简化方式

注：在为router-link-active类名设置样式时，为避免/根路径也出现该样式，可以把根路径设置为/home，同时把通过/访问页面的路径重定向为/home页面

路由的页面设置：
1.使用router-view设置路由的展示区域
2.使用router-link标签设置路由的跳转按钮

<div class="header">
      <ul class="nav">
        <router-link tag="li" to="/">首页</router-link>
        <router-link tag="li" to="/class">课程安排</router-link>
        <router-link tag="li" to="/student">学员展示</router-link>
        <router-link tag="li" :to="{name:'about'}">关于</router-link>
        <router-link tag="li" :to="{path:'/community'}">社区</router-link>	 
 		//router-link标签为跳转按钮 to为跳转路由路径(3种方式)，渲染页面时默认转换为a标签，可使用tag指定转换后的标签类型
      </ul>	    
    </div>
    <router-view class="view" />		// 路由引入的组件内容显示在此标签内
  </div>

路由嵌套
指的是在路由页面中，继续添加子路由，实现子路由跳转功能，如二级分类菜单
添加方式
1.在router中通过下面方式添加子路由路径等信息
2.在主路由页面中添加router-view标签以展示子路由页面

  routes: [
    {
      path: '/',
      name: 'defaultPage',
      component: defaultPage,
      redirect: 'index',	//重定向
      children: [{			//设置子路由
        path: 'index',
        name: 'index',
        component: Index
      }, {
        path: '/changeCity',
        name: changeCity,
        component: changeCity
      }
  ]

路由重定向
指打开一个页面时，设置自动跳转至另外一个页面
使用示例：

{
	path:'*',		// 放置到路由所有的路径最后，指经过前面匹配过后的全部路径
	redirect:(toPath) =>{			// 重定向函数及其参数
		console.log(toPath)
		if(toPath.path == '/'){		//设置根据情况跳转至不同的页面
			return '/home'
		} else {
			return '/NotFind'
		}
	}
}

使用replace/push进行路由跳转

<div class="logo" @click="handleClick">logo</div>
...
handleClick(){
	this.$router.replace('/home')  		// 也可使用push方法
}

replace与push的区别：如果之前访问过A B C D四个页面，使用push跳转时，回退页面会回退至D页面，如果使用的是replace时，会回退至C页面
另外还有一个方法是$router.go(num)方法，即点击跳转至历史记录中的哪个页面，0为当前页，-1为上一页，以此类推；实际中使用push或replace方法较多

在路由文件中可以设置路由独享守卫
如：

{
    path: '/index',
    name: 'index',
    component: () => import('@/views/index.vue'),
    beforeEnter: (to, from, next) => {
      console.log(to)
      console.log(from)
      console.log(next)
      next()
    }
 }