【Vue前端开发学习】第3章，Vue-Router路由的配置使用

前言

  Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

   Vue官网：Vue.js 官方的路由管理器

一、单个路由页面配置使用

使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

1、在{项目路径}/src/router/index.js中添加一路由

const routes = [                        //配置路由，这里是个数组
  {                                     //每一个链接都是一个对象
    path: '/',                          //链接路径
    name: 'Home',                       //路由名称
    component: Home                     //对应的组件模板（不带后缀）
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },

  //  新建一个路由 demo1
  {
    path: '/demo1',
    name: 'demo1',
    component: () => import('../views/Demo1.vue')
  }
]

2、在App.vue 中添加 <router-link to="/demo1">Demo1</router-link>

<template>
  <div id="app">
    <div id="nav">
      <!-- router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址 -->
      <!-- 使用 router-link 组件来导航 -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 新增一个路由 demo1 -->
      <router-link to="/demo1">Demo1</router-link>
    </div>
    
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view/>
  </div>
</template>

3、在 ~/src/views/ 目录下创建Demo1.vue文件

<template>
  <div class="test">
    <h1>This is an Demo1 page</h1>
  </div>
</template>

<script>
export default {
name: "Demo1"
}
</script>

<style scoped>

</style>

4、运行项目，查看页面，已成功添加一个新的路由及其对应的页面

二、嵌套路由页面配置使用

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。

1、在{项目路径}/src/router/index.js中添加一路由信息

提示：以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”，在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

const routes = [                        //配置路由，这里是个数组
  //  新建一个路由 father
  {
    path: '/father',
    // name: 'father',     //如果有子路由，则不能定义name属性
    component: Father,
    children:[
      {
        path: '',         //默认页面
        component: () => import('../views/ChildrenDefault')
      },
      {
        path: 'children1',
        name: "children1",
        component: () => import('../views/Children1.vue'),    //对应的组件模板，通过import()引入
      },
      {
        path: 'children2',
        name: "children2",
        component: () => import('../views/Children2.vue'),
      },
    ]
  }
]

2、在App.vue 中添加父路由

<template>
  <div id="app">
    <div id="nav">
      <!-- router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址 -->
      <!-- 使用 router-link 组件来导航 -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <!--注意：被选中的router-link将自动添加一个class属性值.router-link-active-->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <!-- 新增一个路由 Father -->
      <router-link to="/father">Father</router-link>
    </div>
    
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view/>
  </div>
</template>

3、在 ~/src/views/ 目录下分别创建Father.vue、ChildrenDefault.vue、Children1.vue、Children2.vue组件

提示：嵌套路由不能跳级，需要在父路由组件上通过来调用

<!--Father.vue文件-->

<template>
  <div class="test">
    <!--    <h1>This is Father page</h1>-->
    <router-link to="/father/children1">children1</router-link>    |
    <router-link to="/father/children2">children2</router-link>
    <router-view/>  <!-- Children的子路由不显示，在Father中添加标签占位 -->
  </div>
</template>

<script>
export default {
  name: "Father"
}
</script>

<style scoped>

</style>

<!--ChildrenDefault.vue文件-->

<template>
  <div>
    <h1>
      This is Default page!
    </h1>
  </div>
</template>

<script>
export default {
  name: "ChildrenDefault"
}
</script>

<style scoped>

</style>

<!--Children1.vue文件-->

<template>
  <div>
    <h1>
      This is Children-1 page!
    </h1>
  </div>
</template>

<script>
export default {
  name: "Children1"
}
</script>

<style scoped>

</style>

<!--Children2.vue文件-->

<template>
  <div>
    <h1>
      This is Children-2 page!
    </h1>
  </div>
</template>

<script>
export default {
  name: "Children2"
}
</script>

<style scoped>

</style>

4、运行项目，查看页面

提示：子组件无法渲染。一般有两种情况，1）父组件没有<router-view/>；2）子路由配置时加了一个斜杠 ‘/’

参考链接：
1、《Vue Router官网：嵌套路由》
2、《vue-router（路由）详细教程》