vue-11-路由嵌套-参数传递-路由高亮

1, 新建vue-router 项目

vue init webpack vue-router-test

是否创建路由: 是

2, 添加路由列表页

在 component下创建 NavList 页面

<template>
  <div>
    <div class="navlist">
      <ul>
        <li><router-link :to="index">首页</router-link></li>
        <li><router-link :to="course">课程</router-link></li>
        <li><router-link :to="master">专家</router-link></li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default {
    name: "NavList",
    data() {
      return {
        index: "/",
        course: "/course",
        master: "/master",
      }
    }
  }
</script>

<style scoped>
  .navlist {
    width: 100%;
    height: 50px;
    background: #f1f1f1;
  }
  ul {
    list-style: none;
  }
  li {
    float: left;
    margin: 20px;
  }
</style>

 

3, 添加子页面

index.vue, master.vue, course.vue等, 仅展示 index.vue

<template>
  <div>
    <NavList/>
    首页
  </div>
</template>

<script>
  import NavList from "./NavList";
  export default {
    name: "index",
    components: {NavList},
    data() {
      return {

      }
    }
  }
</script>

<style scoped>

</style>

 

4, 在index.js 中导入子页面, 配置路径和页面关系

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import Course from '@/components/course'
import Master from '@/components/master'
import Java from '@/components/course/java'
import Python from '@/components/course/python'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/course',
      name: 'Course',
      component: Course,
    },
    {
      path: '/master',
      name: "Master",
      component: Master
    }
  ]
})

5, 在app vue 中, 添加路由显示位置

router-view

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <!--<NavList/>-->
    <router-view/>

  </div>
</template>

6, 使用 npm run dev 运行, 即可看到初始效果

7, 路由嵌套

有时候, 在二级页面下还需要新的子页面, 就需要使用路由嵌套功能

7.1) 在 component中添加 java.vue, python.vue 等子页面

<template>
  <div>
    java
  </div>
</template>

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

<style scoped>

</style>

7.2), 在course 中 引入路由嵌套

使用 router-link 进行页面跳转

添加 router-view 指定显示区域

路径导航使用全路径

<template>
  <div>
    <NavList/>

    <div class="left">
      <ul>
        <li><router-link :to="java">java</router-link></li>
        <li><router-link :to="python">python</router-link></li>
        <li>bigdata</li>
      </ul>
    </div>

    <div class="right">
      视图区域
      <router-view/>
    </div>

  </div>
</template>

<script>
  import NavList from "./NavList";
  export default {
    name: "course",
    components: {NavList},
    data() {
      return {
        java: "/course/java",
        python: "/course/python",
      }
    }
  }
</script>

<style scoped>
  .left, .right {
    float: left;
  }
  .left {
    margin-left: 0;
  }
  .right {
    margin-left: 50px;
  }
</style>

7.3) 在index.js 中指定 子嵌套关系

使用 redirect 指定一开始进入的默认页面

{
      path: '/course',
      name: 'Course',
      component: Course,
      // 默认进入重定向
      redirect: "/course/java",
      // 子嵌套
      children: [
        {
          path: "java",
          name: "Java",
          component: Java
        },
        {
          path: "python",
          name: "Python",
          component: Python
        }
      ]
    },

 8, 参数传递

在vue中, 可以通过参数传递, 将值或者对象传递给路由子页面

8.1) 定义要传递的对象

data() {
      return {
        index: "/",
        course: "/course",
        master: "/master",
        obj: {
          name: "wenbronk",
          age: 18
        }
      }
    }

8.2), 在 router-link 中, 使用 :to={} 的形式进行传递参数

<li><router-link :to="{ name: 'Master', params:{count: 100, type: obj}}">专家</router-link></li>

8.3) 在 master 页面, 接受参数

<template>
    <div>
      专家: {{ $route.params.count }} - {{ $route.params.type.name }}
    </div>
</template>

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

<style scoped>

</style>

9, 路由高亮, 实现点击的呈现高亮效果

9.1), 在index.js 中, 添加 路由选中class名

默认是 router-link-active, 更改

  mode: "history",
  linkActiveClass: "active",

9.2), 在全局中配置, css 样式

  .active {
    color: red
  }

9.3), 对于匹配 / 的, 会始终显示高亮, 需要添加 exact 属性; 

 <li><router-link :to="index" exact>首页</router-link></li>