Vue项目中的路由配置，两种方式实现路由的按需加载

一、router.js中定义路由

1、普通加载路由

包含一级路由、二级路由、动态路由的定义

import Vue  from "vue";
import Router from 'vue-router'
// 引入页面
import Home from './pages/home'
import Login from './pages/login'
import Index from './pages/index'
import  Product from './pages/product'
import  Detail from './pages/detail'
// 通过vue的方式加载插件
Vue.use(Router)
export default new Router({
    routes: [//进行列表的配置
        {
            //home为根路由,一级路由，在一级路由页面需定义							// <router-view></router-view>
            path:'/',
            name:'home',
            component:Home,
            //重定向,默认访问index
            redirect:'/index',
            children:[
                //子路由，二级路由
                // 子视图为/index/product
                {
                    path:'/index',
                    name:'index',
                    component:Index,
                },
                {
                    //该子路由为动态路由——需要接收参数
                    path:'/product/:id',
                    name:'product',
                    component:Product,
                },
                {
                    //该子路由为动态路由
                    path:'/detail/:id',
                    name:'detail',
                    component:Detail,
                }
            ]
        },
]
});

2、按需加载路由

一定要加载的路由，定义成普通加载路由模式；不确定是否需要加载的，定义在按需加载路由，解决前端性能优化问题。
一共有两种按需加载方式：

方式一:require

component:resolve => require(['./pages/detail.vue'],resolve),

例如：home.vue、index.vue 是必须加载的路由，product.vue和detail.vue需要按需加载

export default new Router({
    routes: [
        {
            path:'/',
            name:'home',
            component:Home,
            redirect:'/index',
            children:[
                {
                    path:'/index',
                    name:'index',
                    component:Index,
                },
                {
                    path:'/product/:id',
                    name:'product',
                    //普通加载路由
                    // component:Product,
                    //按需加载路由 
                    component:resolve => require(['./pages/product.vue'],resolve),

                },
                {
                    path:'/detail/:id',
                    name:'detail',
                    // component:Detail,
                    component:resolve => require(['./pages/detail.vue'],resolve),
                }
            ]
        },
    ]
});

方式二:es语法 import

• 下载插件

npm i @babel/plugin-syntax-dynamic-import --save

• 使用

{
	path:'/login',
	name:'login',
	// component:Login,
	// component:resolve => require(['./pages/login.vue'],resolve),
	component: () => import('./pages/login.vue')
},

二、main.js中加载路由

路由定义后需要加载才能进行使用

import Vue from 'vue'
//引入路由
import router from './router'
import App from './App.vue'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

三、一级路由页面——home.vue页面

home.vue页面为一级路由页面，进行结构复用
结构复用：nav-footer和nav-header都是公用的部分，不同的部分通过router-view渲染 ；detail.vue index.vue product.vue 嵌套在router-view组件中

<template>
    <div>
        <nav-header></nav-header>
        <router-view></router-view>
        <nav-footer></nav-footer>
    </div> 
</template>
<script>
    import NavHeader from './../components/NavHeader'
    import NavFooter from './../components/NavFooter'
    export default {
        name:'nav-home',
        //加载多个组件
        components:{
            NavHeader,
            NavFooter
        }
    }   
</script>

四、二级路由页面——其他子页面

Index.vue、product.vue、detail.vue页面根据各页面功能进行分别定义