import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [ // 路由关系数据

]

const router = new VueRouter({
  mode: 'history', // 可以选择hash
  base: process.env.BASE_URL,//  配置单页应用的基路径
  routes
})

export default router

routes里面就是配置路由与对应路由组件的地方。参数类型为

// 每个routes
{
  path: '/about',// 对应路由地址
  name: 'About',// 路由对应的名称
  // 可以直接用一个路由组件，这样写是懒加载，触发对应路由的时候才会去请求这个路由组件的信息
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}

每个路由对应的是一个<router-view>，如果是多级路由（嵌套路由），每个参数里面有个children，为数组，数组里每个元素和每个routes是相同的，但是需要对应父组件下的<router-view>路由视图出口如下：

  let routes = [
    {
      path: '/user' // 对应的地址为 基础地址:端口号/user
      component: User, // 对应的路由组件，对应第一个匹配到的  router-view 
      // 子路由的渲染关系为 -- 第一个router-view渲染父的component，父内的component的routerview对应子路由的component
     // 例如 /user/one -- 渲染User -- 在渲染User组件内的routerview对应的UserOne 
      children: [
        {
          path: 'one', // 对应路由为 基础地址:端口号/user/one
          component: UserOne // 对应路由组件UserOne，对应user里面的router-view视图出口
        },
        {
          path: 'two', // 对应路由为 基础地址:端口号/user/two
          component: UserTwo// 对应路由组件UserTwo，对应user里面的router-view视图出口
        }
      ]
    }
  ]

路由配置和对应路由视图的出口关系是一个path及component对应一个视图出口。子路由对应父路由component内的视图出口。

动态路由传参（路由传参的后续在router-link及路由函数进行说明），这个因为与路由配置十分雷同，就放在这里进行说明。

let routes = [{ path: '/user/:id', component: User }]

 这里的 /:Id 表示是一个动态路由，可以不是指定的路由地址，符合/use/anything的参数都会匹配到这个路由。从而渲染对应的路由组件User，一般会根据这个id的参数进行初始化页面（如根据id查询数据等），可以在每个路由组件实例的this.$route.params中获取。

基础配置就到这里，后续命名路由，命名视图，路由传参等后续再进行讲解。