Vue-router
一：安装路由
//引入外链//CNDnpm install vue-router
// main.jsimport Vue from 'vue'import VueRouter from './router/index.js'
// router/index.jsimport Vue from "vue";import router from "vue-router";import Index from "../views/Home/index";//首页import login from "../views/login/login";//登陆页import LinesRouters from "./LinesRouter.js"//线路页面路由import MyRouters from "./CenterRouter.js"//我的页面路由Vue.use(router);const routeHome = [ { path:'/', //当前路径(是给默认首页的路径index.vue文件) component:login, //组件对应view的index.vue name:"login" //给个对应的名字比较好，不给也可以。 }, { path:'/Home/Index', component:Index, name:"Index" },]let routes = routeHome.concat(LinesRouters,MyRouters); （1）子路由：想要子路由的内容完全显示出来，那么就创建一个空路由，存放router-view，用来显示子理由的。
{ path:'/news', //新闻页面 component:NewsN2, //用一个空的路由模板代替。提供 的渲染视图。 name:'NewsN2', children:[ { path:'/', 、、默认的就是新闻页面 component:News, name:'News' }, { path:'n1', //这个就顺其自然的就是新闻页的子页面了。也是提供 的渲染视图。 component:nn, name:'nn', children:[ { path:"/", //这个才是真的的子页面，因为nn也是代替NewsN1这个模板的。 component:NewsN1, name:"NewsN1", }, { path:"newsS", //这个自然就是NewsN1的子页面，也就是新闻的孙子页面。 component:newsS, name:"newsS", } ] }, ] }, （2）路由传参(path和query配合)：
路径地址：http://localhost:8081/#/test?name=1//传参页面1.:方式 跳转 2.编程方式：this.$router.push({ path: '/LinesManage/LinesPlan/LinesPlanDetail', query: { id:"123", name: "小明" }})//获取id页面使用：this.$route.query.id：获取id
（3）路由传参(name和params配合)：
路径地址：http://localhost:8081/#/test/1//传参页面1.:方式 跳转 2.编程方式：this.$router.push({ name: 'LinesPlanDetail', params: { id:"123", name: "小明" }})//获取id页面使用：this.$route.params.id
（4）页面传参
1. 简单点就是父子组件传值。方法通过props，$emit("方法名",aguments);aguments:多个值。vuex提交数据。 （5）路由钩子1.全局前置守卫
route.beforeEach((to, from, next) => { //to:前往路径 //from:前路径 getJSON("Manage/FlowManage/NoHandNotice/IsLogin", {},function(res){ if(res.data.message=='1'){ //登陆状态 if(to.name=="login"){ //如果是登录页 route.push({name: 'Index',path:'Home/Index'});//跳转首页 } }else{ //未登录状态 route.push({name: 'login',path:'/'});//跳转登录页 } },function(err){ console.log(err) }) next();}) 2.全局解析守卫
router.beforeResolve((to,from)=>{ //......}) 3.全局后置钩子
router.afterEach((to, from) => { // ...})//然而和守卫不同的是，后置钩子不会接受 next 函数也不会改变导航本身： 4.路由独享的守卫
//路由配置上直接定义守卫const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]}) 5.组件内的守卫
*beforeRouteEnter*beforeRouteUpdate*beforeRouteLeaveconst Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` }}//beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。 但是我们可以通过next()来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 })}//beforeRouteLeave :这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。beforeRouteLeave (to, from , next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) //不进行下一页 }} 6.路由重定向
{ path:'*', component:Page404, name:'paeg404', redirect:'Me' //不用'/' } { path:'*', component:Page404, name:'paeg404', redirect:bgg=>{ const{hash,params,query}=bgg; if(params.id=="110") //当这个路由绑定的id是110时执行跳转。 110 return '/' //跳到你想要的页面。 } } （7）过渡动效
1.<router-view>是基本的动态组件，所以我们可以使用<transition>组件给它们添加一些过渡效果。
2.单个路由的过渡
//可以为每个组件单独设置想要过渡的效果。只要在各个组件内使用并加上相应的name属性const Foo={ template:` `} const Bar={ template:` 123`} 123
3.基于路由的动态过渡
//还可以基于当前路由与目标路由的变化关系，设置动态过渡效果//使用动态的transition name//结扎和在父组件内监听 watch $route决定使用哪种过渡watch：{ '$route'(to,from){ const toDepth = to.path.split('/').length; const fromDepth = from.path.split('/').length; this.transitionName = toDepth < fromDepth?'slide-right' :'slide-left' }}