关于vue-router使用步骤

1. 首先通过npm i vue-router

2. 引入到路由配置js文件，同时这个js文件也要引入vue，然后vuerouter挂载到全局使用

import VueRouter from 'vue-router'
import  Vue from 'vue'
// 挂载到全局使用
Vue.use(VueRouter)

3. new一个vuerouter，然后配置路由文件，其中要注意，配置文件是routes:[ ] , routes和component这两个单词千万别写错，不然不会显示

const router = new VueRouter({
  routes: [
    // 登录组件
    { path: '/login', component: Login }
  ]
})

4.导出路由模块，在入口文件main.js中进行引入

export default router

5.最后在根组件App.vue中写入路由组件

<template>
  <div id="app">
    <!-- 一级路由显示位置 -->
    <router-view></router-view>
  </div>
</template>

附加： 我们也可以在一级路由里面配置二级路由，方法如下

const router = new VueRouter({
  routes: [
    // 登录组件
    { path: '/login', component: Login ,
       children:[{'/children',component: Children}]
    }
  ]
})