vue路由，二级路由及跳转

★router文件下的index.js文件：

/* 导入Vue构造函数 */

import Vue from 'vue'

/* 导入路由VueRouter构造函数 */

import VueRouter from 'vue-router'

/* 导入HomeView页面 */

import HomeView from '../views/HomeView.vue'

//调用构造函数Vue的use方法 传入VueRouter构造函数

//作用是把VueRouter作为一个插件 全局插入到Vue中

Vue.use(VueRouter)

/* 定义一个路由数组对象 */

const routes = [

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

  path就是路由的地址

  name给路由起的名字

  component 具体跳转的页面

  */

  {

    /* path: '/' 根页面,表示已进入就显示的页面 */

    path: '/',

    name: 'home',

    /* 这种方式一进入页面就会全部加载,不是用到的时候再加载

       性能没有懒加载的方式好 */

    component: HomeView,

    /* 可以使用redirect 重定向 已进入主页就展示第一个子页面

     redirect 后面跟的是路径名 并不是name */

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

    redirect:'one',

    children:[{

      path:'one',

      name:'one',

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

    }]

  },

  {

    /* 这里是一级目录所以可以加/ 表示根目录 */

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    /* 懒加载功能 : 一开始不加载,当你切换路由的时候再加载 */

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

    /* about不是根路径 所以redirect后面要写全 '/about/aboutchild', */

    redirect:'/about/aboutchild',

    children:[{

      path:'aboutchild',

      name:'aboutchild',

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

    }]

  },

  {

    path:'/ChildA',

    name:'ChildA',

    component: () => import('../components/ChildA.vue')

  },

  {

    /* path:'*' 必须要放最后 */

    /* path:'*' 表示上面的路由没有匹配到 则进入下面的页面 */

    path:'*',

    name:'notfound',

    component: () => import('../components/NotFound.vue')

  }

]

/* 实例化构造函数 VueRouter 产生一个实例化对象

   并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter*/

const router = new VueRouter({

  routes

})

/* 把实例化路由对象 router默认导出  */

export default router

main.js文件：

/* 导入Vue构造函数 */

import Vue from 'vue'

/* 导入App.vue入口页面 */

import App from './App.vue'

/* 导入router文件夹中的index.js中的router实例化对象 */

/* 一个文件夹里面只有一个index.js文件在脚手架中可以把./router/index.js简写为./router  */

import router from './router'

/* 生产提示 */

/* 改成false是用来关闭开发者提示 */

Vue.config.productionTip = false

/* 在Vue的对象参数里面配置 el:"#app" 等于 .$mount('#app')

   都是用来挂载到id为#app的div上的*/

   /* 把路由实例化对象router配置在Vue中,作用是保证项目中

    所有的vue文件都可以使用router路由的属性和方法 */

new Vue({

  router,

  /* 会把所有vue文件渲染到App组件上 */

  render: h => h(App)

}).$mount('#app')/* 等同于 el:"#app" */

viwes文件下：

App.vue文件：

AboutView.vue文件：

AboutChild.vue文件：

HomeView.vue文件：

OneView.vue文件：

components文件下：

ChildA.vue文件：

ChildB.vue文件：

NotFound.vue文件:

左边文件目录：