/* 导入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后面跟的是路径名 / / 因为/是根路径 所以可以直接写one / redirect:'/one', children:[{ path:'one', name:'one', component: () => import('../views/OneView.vue') }] }, { / 这里是一级目录所以可以加/ /表示根目录 / path: '/about', name: 'about', / 懒加载 一开始的时候不加载 当你切换的这个路由的时候再加载 / component: () => import('../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('../views/ChildA.vue') }, { path: '/childb', name: 'childb', / 懒加载 一开始的时候不加载 当你切换的这个路由的时候再加载 / component: () => import('../views/ChildB.vue') }, { / path: ''按照常理要放在最后 ★ / / path: '' 表示上面的路由没有匹配到 则进入下面的页面 / path: '', name: 'notfound', /* 懒加载 一开始的时候不加载 当你切换的这个路由的时候再加载 */ component: () => import('../views/NotFound.vue') },
]
/* 实例化构造函数VueRouter 产生一个实例化对象router 并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数VueRouter*/ const router = new VueRouter({ routes:routes })
/* 把实例化路由对象router默认导出 */ export default router
