vue-router 打包文件，路由懒加载、路由嵌套

1.vue-router 打包文件

运行 npm run build打包文件，可生成dist文件夹

其中
app文件 是当前应用程序开发的所有代码，都在这个文件里面，（业务代码，自己手动写的代码）
vendor（提供商，第三方）在项目中引用第三方的内容，如vue
manifest：是为我们打包的代码（相互依赖）做低层支撑

2.vue-router 路由懒加载

当打包构建应用时，js包会变得非常大，影响页面加载。
可以将不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应的组件。就是将不同的路由打包到不同的js文件里面
最好是一个路由打包到一个js文件中
原来导入这三个路由是前三个注释的代码，路由懒加载如下所示：


老师讲课截图：

3.路由的嵌套使用

1.在Home下创建连个子文件，HomeMessages.vue和HomeNews.vue文件

HomeMessages.vue内容如下：

<template>
    <div>
        <ul>
        <li>消息</li>
        <li>消息</li>
        <li>消息</li>
        <li>消息</li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'HomeMessages'
}
</script>

<style scoped>

</style>

HomeNews.vue代码如下：

<template>
    <div>
        <ul>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'HomeNews'
}
</script>

<style scoped>

</style>

2.在index文件中导入这两个新的vue文件

导入文件

const HomeNews = ()=> import('../components/HomeNews')
const HomeMessages = ()=> import('../components/HomeMessages')

在Home文件中导入它的孩子们：

{
    path:'/home',
    component:Home,
    children:[
      {
        //注意：子路由路径前不能加 /
        path:'news',
        component:HomeNews
      },
      {
        path:'messages',
        component:HomeMessages
      }
    ]
  },

3.在Home.vue中使用这两个路由

<template>
    <div>
        <h2>我是Home</h2>
        <router-link to="/home/news">新闻</router-link>
        <router-link to="/home/messages">消息</router-link>
        <router-view></router-view>
    </div>
</template>

最后结果：

4.router参数传递

主要有两种方法：params和query

query的方法如下：

1.先创建一个新的文档vue

<template>
    <div>
        <h2>我是Profile</h2>
        
    </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style scoped>

</style>

2.导入到index文件中

const Profile = ()=> import('../components/Profile')

{
    path:'/profile',
    component:Profile
  }

3.在app.vue文件中导入这个新路由

重点：query:{name:xiang,age:18,height:170} 想要传到profile的内容

<router-link v-bind:to="{path:'/profile',query:{name:xiang,age:18,height:170}}" tag="button">文档</router-link>
    <router-link v-bind:to="'/user/'+userId" tag="button">用户</router-link>

注意传递对象类型就可以绑定v-bind，query就是需要传入的内容

4.在profile显示传入的内容

在profile.vue添加：

<template>
    <div>
        <h2>我是Profile</h2>
        <h2>{{$route.query}}</h2>
    </div>
</template>

结果：