Vue-cli项目中路由的使用

一.什么是路由：

简单的来说，Vue-router就相当于一个导航系统，输入一个页面地址，它会通过路由表，指挥加载哪一个模块显示在该页面上，实现vue模块的复用。

二.如果创建项目时未加载vue-router，需手动下载依赖

1.加载依赖
npm install vue-router
2.在srcc目录下创建一个router目录，并创建一个index.js文件，列子如下(参照下面的app.vue)：
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router=new Router({
  mode:"history",//路由模式，hash和history，history为模仿html5中的history api
  routes: [
    //添加静态路由
    {
    //根路径
      path:"/",
      name:"Top_Navbar",//路由名称
      components:{//加载多个组件，别名+懒加载模式，对应下面app.vue,只能有一个default
        default:resolve=>require(['../components/indexPage/Top_Navbar'],resolve),
        Carousel:resolve=>require(['../components/indexPage/Carousel'],resolve),
        Products:resolve=>require(['../components/indexPage/Products'],resolve),
        Jumbotron:resolve=>require(['../components/indexPage/Jumbotron'],resolve),
        Footer:resolve=>require(['../components/indexPage/Footer'],resolve)
      }
  ]
})

export default router

对应App.vue

<template>
  <div>
    <router-view></router-view>//default组件入口
    <div class="index">
      <router-view name="Carousel"></router-view>//Carousel组件入口
      <router-view name="Products"></router-view>//Products组件入口
      <router-view name="Jumbotron"></router-view>//Jumbotron组件入口
      <router-view name="Footer"></router-view>//Footer组件入口
    </div>
  </div>
</template>

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

三.全局前置守卫：BeaforeEach((to,from,next)=>{})
在每次跳转地址的时候，都会先进入BeaforeEach进行处理，如果符合要求才跳转到该页面

router.beforeEach((to,from,next)=>{
  next();//相当于收费站的放行，意思是你可以走了，**必须加上**
})

注：to表示到哪里去，from表示从哪里来，next（）表示是否放行，如果让它跳转到跟页面，直接使用next(’/’)

**列如：**
router.beforeEach((to,from,next)=>{
//如果传入的地址在路由表中没有找到，则跳转到/404
  if(to.matched.length==0){
    next('/404')
  }
  next();//找到，放行
})

四.动态路由 ：addRoute()
如果想要限制用权限，比如：用户在未登录的时候，不能跳转到购物车页面，此时你可以将购物车路由从静态路由表中拿出来，用户就无法访问到该页面，当用户登录成功后，用addRoute将该路由地址动态的添加到路由表中，用户就可以访问到该页面。

router.beforeEach((to,from,next)=>{
  //用户登录成功后需要重新刷新页面，使用windows.location.href来进行登录成功后动态添加shoppingCart页面
  if(sessionStorage.getItem('user')&&!store.state.login.login){/
    store.dispatch('login/reLogin')
    router.addRoutes([{path:'/shoppingCart',name:"Cart",components:{
      default:resolve=>require(['../components/indexPage/Top_Navbar'],resolve),
      Cart:resolve=>require(['../components/shoppingCart/ShoppingCart'],resolve)
    }}])
    next({...to,replace:true})
  }
  next();
})