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>