初学vue-router

index.js 中配置路由
vue-router 基本使用　　　
　首先要定义route, 一条路由的实现。它是一个对象，由两个部分组成： path和component. path 指路径，component 指的是组件。如：{path:’/home’, component: home}
最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。
配置完成后，把router 实例注入到 vue 根实例中,就可以使用路由了
执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性，
上面我们定义的路由，都是严格匹配的，只有router-link 中的to属性和 js 中一条路由route中 path 一模一样，才能显示相应的组件

const router = new Router({
  mode: "history",
  base: process.env.ROUTER_BASE,
  routes: [
    {
      path: '/',
      redirect: '/home',
      meta: {
        requireAuth: true
      },
    },
    {
      path: '/login',
      component: resolve => require(['../pages/home.vue'], resolve),
    },

redirect: ‘/home’ 重定向，所谓重定向，就是重新给它指定一个方向，它本来是访问 / 路径，我们重新指向‘/home’, 它就相当于访问 ‘/home’, 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向。
resolve => require([’…/pages/home.vue’], resolve)这种写法是异步模块获取，打包的时候每次访问这个路由的时候会单调单个文件，按需加载。还有种写法就是用import，这种是把component打包到一个文件里面，初次就读取全部

编程式导航：这主要应用到按钮点击上。当点击按钮的时候，跳转另一个组件, 这只能用代码，调用rourter.push() 方法。 当们把router 注入到根实例中后，组件中通过 this.$router 可以获取到router, 所以在组件中使用

this.$router.push(“home”), 就可以跳转到home界面
动态路由:路径中肯定有user, id 不同，那就给路径一个动态部分来匹配不同的id. 在vue-router中，动态部分 以 : 开头，那么路径就变成了 /user/:id, 这条路由就可以这么写： { path:"/user/:id", component: user }.

{
      path: '/',
      redirect: '/dashboard',
      meta: {
        requireAuth: true
      },
    },
    {
      path: '/login',
      component: resolve => require(['../components/page/Login.vue'], resolve),
    },
    {
      path: '/',
      component: resolve => require(['../components/common/Home.vue'], resolve),
      meta: {
        title: '自述文件'
      },
      children: [{
          path: '/dashboard',
          component: resolve => require(['../components/page/Dashboard.vue'], resolve),
          meta: {
            requireAuth: true,
            title: '首页'
          },
        },
        {
          path: '/editor',
          component: resolve => require(['../components/page/formcorrelation/VueEditor.vue'], resolve),
          meta: {
            requireAuth: true,
            title: '富文本编辑器'
          },
        },
        {
          path: '/markdown',
          component: resolve => require(['../components/page/formcorrelation/Markdown.vue'], resolve),
          meta: {
            requireAuth: true,
            title: 'Markdown编辑器'
          },
        },
        
        
       
        }
      ]
    },

嵌套路由
　　嵌套路由，主要是由我们的页面结构所决定的。当我们进入到home页面的时候，它下面还有分类.
　　在路由的设计上，首先进入到 home ,然后才能进入到phone, tablet, computer. Phone, tablet, compute 就相当于进入到了home的子元素。所以vue 提供了childrens 属性，它也是一组路由,相当于我们所写的routes。