在实际项目中很多地方需要router的运用，下面从实践运用的例子总结一下需要引用router的地方

1. 导航守卫：当用户没有登录时，限制用户不能访问某些页面
2. 组件过渡，当页面中切换会出现动态的切换效果
3. 组件中的参数传输：在首页选择某些信息，跳转到子页能做出渲染
4. 懒加载：体验的改进，打开首页是不用加载全部组件，有些组件设置懒加载就可以到用的时候在加载

导航守卫解析

这里实现访问权限限制还需要访问vuex的store，获取当前用户的权限，判断是否允许跳转

1. 在router中的index.js设置全局导航守卫（也就是跳转拦截）

{
      path:'/CarsList',
      name:'CarsList',
      component:CarsList,
      meta: { requiresAuth: true }       //首先在要被限制的路由设置路由元信息，可以通过匹配requiresAuth（可修改）字段验证该路由是否拦截，现在设置了carList为未登录拦截组件（未登录不可访问）
    },

//书写全局拦截守卫，router是声明的路由组件
router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requiresAuth)) {      //第一个检测跳转的页面是否设置了未登录不可查看权限
    // $store.state.checklogin
    if (store.state.checklogin) {                      //如果跳转的是要登录权限的页面，这里就是通过访问store检测用户是否登录
    //大坑，这里是通过访问vue中的store.js 的登录状态来检测权限，在这里访问store不能使用全局变量$store.state,因为这时候页面还没加载，所以要在路由头部import 引用store.js文件！！！！！！！
      console.log('你还没登录呀！');
      next({
        name: 'GoodsSelect',
          // query: { redirect: to.fullPath},//这里是实现路径重定义，方便完成登录动作直接跳转到本页面
        params:{err:1}   //放回是传递信息给主页面，方便交互（告诉用户不能访问该地方）
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
});

在权限不够是跳转到默认页面接收params并作出相应动作

mounted(){               //每次进入该页面挂载时即验证this.$route.params.err传来信息
          if( this.$route.params.err){
            this.$message({
              type: 'warning',
              message: '您还没登录呀，请登录！'
            });
          }

      },

组件过渡解析

• 组件过渡对交互视觉有很好的体验性，有两个官方教程1、官方教程2
  特别要注意组件内部使用过渡与组件路由过渡切换
  路由切换效果：

<transition name="el-fade-in-linear">
    <router-view  class="app-router-view"></router-view>
    </transition>
    //只需要在transiton加入相应的css属性就可以控制切换效果，router官网还提供每一个组件路由进出的切换效果，这里的效果每个组件都相同，"el-fade-in-linear"是element淡入淡出的继承样式，可以直接用
    //如果要想在整个页面进出有动态效果直接在scss属性样式设置

• 组件内元素切换有动态效果：

 <transition-group name="list-complete" tag="el-col" appear>
          <el-col :span="span" v-for="(item,index) in data" :key="index" v-show="item.carshow&&item.carprice" class="list-complete-item">
            <div class="item ">
              <el-card  :body-style="{ padding: '0px'}">
                <img :src="item.car_photo_url" class="item-img" />
              </el-card>
              ...

              </div>
            </div>
          </el-col>
        </transition-group>
        //同样是用name标志样式来控制（注意如果不是单个的组件，一定要用transition-group）

组件间参数传输（网站必须）

如果上一个页面交互中数据与下一个页面有交互（
eg:租车网页首页选择了时间、地点，按确定跳转到汽车展示路由，并请求后台汽车数据，就是大概这么一个过程
）
A页面携带参数跳转到B页面 逻辑思路：
A触发绑定事件编程式：router.push(…)，触发该事件将跳转到目标路由，并打包参数传到该路由组件，B组件每次挂载mounted时会检测是否有路由传输参数$route.params，有就加载参数执行后台请求动作，渲染页面，完成参数传输的全过程。
A页面代码

//触发该事件将，编程式路由会跳转和携带参数
 postCarlist(site,stime){        //前面的两个if语句是检车输入数据是否合法，我自己项目的检测
          if(site.length == 0||stime.length == 0){    //验证输入数据是否为空
            this.$message({
              type: 'warning',
              message: '请输入完整时间、地点'
            });
          }else{
            var today=new Date();

            if(stime[0]<today){                        //验证输入的时间是否正确（只能预定）
              this.$message({
                type: 'warning',
                message: '请输入至少2个小时后的时间段'
              });
            }else{
              // 重点是在这里，name后面跟的是要跳转路由的名字，（用name做标记而不用path的原因是path不能用params传输数据，params
              后面带的就是要传输的数据si）
               this.$router.push({ name: 'CarsList',params: { selectsite:this.si}});

            }

          }

        },

B页面要接受数据并作出的相关动作

 mounted(){      //每次挂载的时候都检查数据
      let site=this.$route.params.selectsite;  //这里是接受刚刚传递过来的数据
      if(site.value.length>0){         //如果数据存在，即将参数传递给方法进行请求渲染
        this.postCarlist(site.site,site.value)
      }
      },

懒加载解析

• 懒加载，顾名思义是很懒，不去加载组件，为什么要懒加载呢？这就要回到vue单页面的思想上了，vue网站前端项目一个最大的特点是，路由加载页面，也就是说，在页面跳转时不需要请求后台，只需要post数据就可以了，所以全部子页面就默认要一次性下载好，这就导致了打开首页是非常慢，懒加载就是解决这个问题，可以设置一些不常用的子页面为懒加载，当需要引用这个组件的时候再加载这个页面，这个加载的过程并没有刷新这个页面，只是需要加载等待。所以要合理分配加载的页面，才能降低首页载入时间同时不影响子页面的加载体验。
• 设置懒加载很简单，只需要在router的index.js声明一个自己就可以了

const CarsList = () => import('@/views/CarsList') 
//当路由引用组件Carslist时才加载Carlist,路由其他地方不需要改变，也不需要引入该组件

最后放一下最近租车网站设计的进度图（都是运用了上面的技术栈）

导航守卫的例子

ps:这时的拦截页面就很适合用懒加载啦

组件参数传输例子