Vue-router(3)之 router-link 和 router-view 使用

2018/11/23 11:29
阅读数 11

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 }
    ]}
  ]
})

 

'@/view/New/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>

 son1.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 属性,来覆盖默认的高亮类样式;

测试:

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部