创建一个vue-router项目

创建一个项目添加路由：

打开文件夹在路径栏里面输入cmd 打开cmd命令行

输入vue create router-pro

选择最下面的选项

按下键选择路由并回车，选择vue2版本

问你是否使用路由的历史模式：输入n

问你eslint的语法规范选择哪种？我们选择第一个最基本的格式校验

下面问你什么时候校验语法规范？我们选择保存的时候校验选择第一个

问是否采用最基本的校验更新到package文件？默认选择第一个回车

问你是否配置好了？输入y

还会跳出一个选项你可以输入y 回车也可以直接回车

router-link与router-view

router-link组件路径

OneView

router-view- 二级路由显示的组件容器

   

在src/router/index.js里面设置路由

     一个对象就对应了一个路由

     path就是路由的地址

     name就是路由的名字

     component就是具体跳转的页面

  {

    /* path: '/'表示根路径，一进入页面显示的 */

    path: '/',

    name: 'home',

    /* 这种方式一进入到页面就会全部加载，不是用到的时候再加载，性能没有懒加载方式好 */

    component: HomeView,

    /* 可以使用redirect重定向，一进入主页面就展示第一个子页面  redirect后面跟的是路径*/

    /* 因为/是根路径 所以可以直接写one */

    redirect:'one',

    children:[{

      path:'one', 二级路由的路径直接写

      name:'one',

/* 如下显示懒加载 一开始的时候不加载 当你切换到这个路由的时候再加载 */

      component: () => import('../views/OneView.vue')

    }]

  }

{

path: '*'表示上面的路由没有匹配到 则进入下面的组件,必须要放到最后

{    path: '*',

    name: 'notfound',

    component: () => import(/* webpackChunkName: "about" */ '../views/NotFound.vue')          }