[JavaScript知识库]Vue教程(四十三)路由嵌套

Vue教程(四十三)路由嵌套

• 路由懒加载：
• 当打包构建应用时, Javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
• 懒加载语法：component: () => import(’…/components/Home’)

• 添加组件

创建【components\News.vue】文件

<template>
  <div id="news">
    <h2>鸿雁新闻</h2>
    <p>如何查找商品？</p>
    <p>您可以通过在网站页头“搜索商品”处输入关键字的方法来搜索您想要购买的商品，在商品搜索处，内容栏输入关键字，点击“搜索”按钮，即可搜索出所有符合条件的商品。还可以通过网站的分类导航栏来找到您想要购买的商品分类，根据分类找到您需要的商品。~</p>
  </div>
</template>

<script>
export default {
  name: 'News'
}

</script>

• 路由嵌套配置

// 目录：vuecli2\src\router\index.js

import VueRouter from 'vue-router'
import Vue from 'vue'

/**
 * 路由懒加载：
 * 当打包构建应用时, Javascript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了
 * 懒加载语法：component: () => import('../components/Home')
 */

// 1.注册插件
Vue.use(VueRouter)

// 2. 定义路由
const routes = [
  {
    // 配置默认路径
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('../components/Home'),
    children: [
      {
        path: 'news',
        component: () => import('../components/News')
      }
    ]
  },
  {
    path: '/about',
    component: () => import('../components/About')
  }
]

/**
 * 3. 创建router实例
 * hash模式（默认）：即地址栏 URL 中的 # 符号,这个#就是hash符号，中文名哈希符或锚点，特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
 * history模式：HTML5 History Interface 中新增的两个神器 pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就需要前端自己配置404页面。
 */
const router = new VueRouter({
  mode: 'history',
  routes
})

// 4. 导出router

export default router

• 在home组件配置显示

// 目录： vuecli2\src\components\Home.vue

<template>
  <div id="home">
    <h2>首页</h2>
    <span>欢迎来到【鸿雁】商城->首页</span>
    <div>
      <router-link to="/home/news" tag="button">鸿雁新闻</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

????– 以上为《Vue教程(四十三)路由嵌套》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。

——厚积薄发(yuanxw)