自定义选择创建包：
1.在输入vue create xx创建包时，选择Manually select features可以自定义选择创建包内容。
2.在自定义选择中按空格勾选Router,会跳出版本选择是否是history，请选择no,剩下一路回车。
3.使用这种方式创建，会对多出views和router文件夹。路由是帮你安装和配置好的。

一、脚手架的配置文件 vue.config.js

https://webpack.docschina.org/configuration/
必须要放在根路径，注意：该配置文件中，只能使用commonjs模块化语法

一般我们在脚手架配置文件中操作有3种：

1.关闭eslint-loader语法检查

2.配置devServer服务器

3.定义路径别名

//引入nodejs内置模块path
let path = require( path )
module.exports = {
//关闭 eslint-loader 语法检查.慎用
    lintOnSave:false,
//配置devServer开发服务器。我们目前在这个项目npm run serve服务器上运行，使用的是wabpack开发服务器
    devServer:{
     //端口号设置
        port: 5566,
      //自动打开
        open:true,
      //  静态资源路径
        //注意：__dirname是nodejs的内置变量，返回的是的当前项目的绝对路径
        // contentBase: path.join(__dirname, "static")
    }
//用于配置原生的Webpack配置
    configureWebpack:{
//解析
        resolve:{
            // 定义路径别名
导入组件，我们可以给相对路径，也可以给绝对路径。
@是src的绝对路径（默认的）
@v是src/views的绝对路径（自定义的）
src里建多少个包，就可以建多少个路径。之后引入src里的资源就很方便
            alias:{
                "@c":path.resolve(__dirname, src/components ),
                "@v":path.resolve(__dirname, src/views ),
                "@a":path.resolve(__dirname, src/assets ),
                "@u":path.resolve(__dirname, src/utils ),
            }
        }
    }
}
router的index.js页面使用
// import Home from  ../views/Home.vue 
import Home from  @v/Home.vue 

二、路由模式，有两种模式

（1）hash模式

使用的是锚链接的原理实现路由的跳转，这种方式兼容性超级好，缺点是路径带有#号，不够美观

//http://localhost:5566/#/one
// 创建路由器对象
const router = new VueRouter({
  // 配置路由模式：1.hash模式 2.history模式
  // hash模式，使用的是锚链接的原理实现路由的跳转，这种方式兼容性超级好；缺点是路径带有#号，不够美观。
  // history模式，使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼容老版本的浏览器，刷新后会丢失路由信息。
  mode: hash ,
  // 配置路由信息
  routes
})

（2）history模式

https://router.vuejs.org/zh/guide/essentials/history-mode.html
history模式，使用的是浏览器(html5)中的history对象实现路由的跳转，缺点兼容性不好。打包刷新后会丢失路由信息

const router = new VueRouter({
  mode:  history ,
  routes: [...]
})

三、路由原信息

（1）meta属性，配置路由的元信息，实则就是在每个路由身上配置一份数据

（2）可以在路由原信息里面配置路由访问权限

// 定义路由信息
const routes = [
  {
    path:  / ,
    name:  Home ,
    component: ()=>import( @v/Home.vue ),
    // meta属性，配置路由的元信息，实则就是在每个路由身上配置一份数据
    meta:{
      title: 首页 ,
      // 可以在路由元信息里面配置路由的访问权限
      roles:[ admin , vip , user ]
    }
  },
  {
    path:  /one ,
    name:  One ,
    // 采用路由懒加载，加载路由组件，提高首屏性能
    component: ()=>import( @v/One.vue ),
    meta:{
      title: One ,
      roles:[ admin ]
    }
]

在组件中设置页面title

<script>
export default {
name: One ,
mounted() {
    document.title= one 
},
}
</script>

四、路由守卫

所谓路由守卫就是在页面跳转前和跳转后做拦截设置

（1）路由前置守卫

①to.meta可以获取路由原信息。获取浏览器的缓存中，保存的当前登录用户的权限

②通过配置路由原信息的权限，进行判断。从sessionStorage里的key,获取用户信息赋给role

③判断，如果to.mate路由原信息的roles数组中包含用户的权限，再进行跳转

// 定义路由前置守卫
// 每次跳转路由之前，都会拦截，next方法表明下一步
router.beforeEach((to,from,next)=>{
  //获取浏览器的缓存中，保存的当前登录用户的权限
  let role = sessionStorage.getItem( role )   这个role是sessionStorage中的key，获取value
  //验证用户访问权限
  if(to.meta.roles && to.meta.roles.includes(role)){
    // next()方法，表明继续向下执行
    next()
  }
  // 开启loading
  NProgress.start();
  console.log(to);
})

（2）路由后置守卫

通过to.meta，可以获取到路由原信息中设置的title并赋给document.title
放置在路由后置守卫，跳转后才显示标题

// 定义路由后置守卫
router.afterEach((to,from)=>{
  // 配置当前页的标题
  document.title = to.meta.title
  console.log(to);
  // 结束loading
  NProgress.done();
})

导出路由器对象
export default router

五、nprogress加载进度条

（1）安装

npm install nprogress

（2）在router的index.js中导入

// 导入nprogress
import NProgress from "nprogress";
// 导入nprogress的样式
import "nprogress/nprogress.css";

（3）在路由守卫中放入

开启loading
  NProgress.start();
结束loading
  NProgress.done();

六、二级路由

（1）二级路由，路由视图需要在配置一级路由的组件中配置

通俗讲就是one的二级路由，就在one的组件中配置路由视图和跳转

one组件的页面
    <router-link to="/sz">深圳</router-link>
    <router-link to="/nj">南京</router-link>
    <router-view></router-view>

router的index.js页面
 {
    path:  /one ,
    name:  One ,
    // 采用路由懒加载，加载路由组件，提高首屏性能
    component: ()=>import( @v/One.vue ),
    meta:{
      title: One ,
      roles:[ admin ]
    },
    //定义one的二级路由
    children:[
      {
        path: nj ,
        name: nj ,
        // 采用路由懒加载的方式，导入组件
        component:()=>import( ../views/city/Nj.vue ),
        meta:{
          title: 南京 
        }
      },
      {
        path: sz ,
        name: sz ,
        component:()=>import( ../views/city/Sz.vue ),
        meta:{
          title: 深圳 
        }
      }
    ]
  }

（2）路由懒加载

采用路由懒加载，加载路由组件，提高首屏性能
组件按需导入，路由懒加载

 component: ()=>import( @v/Home.vue ),