Vue-router（3）之 router-link 和 router-view 使用

router 导入

import Vue from 'vue'
import Router from 'vue-router'
import order from '@/view/New/order.vue'
import Son1 from '@/view/New/son1.vue'
import Son2 from '@/view/New/son2.vue'
import Son3 from '@/view/New/son3.vue'

Vue.use(Router)

export default new Router({
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
  routes: [
    { path: '/', redirect: '/4' },
    { path: '/4', name: 'order',redirect: '/4/son1', component: order, children: [
      { path: '/4/son1', name: "son1", component: Son1 },
      { path: '/4/son2', name: "son2", component: Son2 },
      { path: '/4/son3', name: "son3", component: Son3 }
    ]}
  ]
})

order.vue

<template>
  <div class="detail">
    <div class="box">
      <p>父组件</p>
      <router-link to="/4/son1" active-class="u-link--Active">首页</router-link>
      <router-link to="/4/son2" active-class="u-link--Active">电影</router-link>
      <router-link to="/4/son3" active-class="u-link--Active">关于</router-link>
    </div>
    <!-- 这是一个占位符，将来，通过路由规则，匹配到的组件，会被替换到 router-view 所在的位置 -->
    <router-view></router-view>
  </div>
</template>

<style lang="less" scoped>
.detail {
  margin: 5px;
  padding: 10px;
  border: 2px dashed salmon;
  height: 400px;
  background-color: #f6f6f6;
  .box {
    margin: 5px;
    padding: 10px;
    border: 2px dashed blue;
    p {
      color: salmon;
    }
    .u-link--Active {
      color: aqua;
    }
  }
}
</style>

son.vue：

<template>
  <div>
    <h1>这是son1.vue 首页 子组件</h1>
  </div>
</template>

<style lang="less" scoped>
div {
  margin: 5px;
  padding: 10px;
  border: 2px dashed red;
  h1 {
    font-size: 26px;
    font-weight: 700;
    color: orange;
  }
}
</style>

son2：

<template>
  <div>
    <h1>这是son2.vue 电影 子组件</h1>
  </div>
</template>

<style lang="less" scoped>
div {
  margin: 5px;
  padding: 10px;
  border: 2px dashed blue;
  h1 {
    font-size: 26px;
    font-weight: 700;
    color: red;
  }
}
</style>

son3：

<template>
  <div>
    <h1>这是son3.vue 关于子组件</h1>
  </div>
</template>

<style lang="less" scoped>
div {
  margin: 5px;
  padding: 10px;
  border: 2px dashed green;
  h1 {
    font-size: 26px;
    font-weight: 700;
    color: palevioletred;
  }
}
</style>

路由规则的匹配过程

1. 用户点击 页面的 路由链接router-link，点击的一瞬间，就会修改浏览器地址栏中的Hash地址；

2. 当 hash 地址被修改以后，会立即被 vue-router 监听到，然后进行 路由规则的 匹配；最终，找到 要显示的组件；

3. 当 路由规则匹配成功以后，就找到了要显示的组件，然后把这个组件，替换到页面指定的路由容器router-view 中

设置路由高亮的两种方式和重定向

1. 通过路由默认提供的 router-link-active, 为这个类添加自己的高亮样式即可；

2. 通过路由构造函数，在传递路由配置对象的时候，提供 linkActiveClass 属性，来覆盖默认的高亮类样式；

测试：