vue-router

总结：

应该把导航作为一种引入模式的文件，哪里需要就在哪里去引入，
- 在这个项目中，把NavList插入到各个页面中
- 可以满足当你点击一个选选项的时候，不需要导航的场景

1.路由的嵌套：

- 嵌套路由时，需要在index.js文件中的路由配置中相应页面加上children：[path，component]  
- 在二级页面的router-link标签中，需要添加上完整的页面路径
- 三级路由和二级一致，加入children就好

2.重定向：
在路由的index文件中加入redirect,定义默认页面

    有关router-view：哪里需要显示视图哪里就加上router-view

3.路由传递参数：
- 需要传递参数时，则在index中加上name这个属性，同path、component位置一致
- 方式一：在传递页面的选项加入，其中
100为传递的参数，接收页面为{{ $route.params.count }} ，此时可以在页面网址中看到你传递的参数：http://localhost:8080/#/master/100
- 方式二：传递页面中专家，网页地址变为
http://localhost:8080/#/master?count=100

4.导航的高亮
- 使用linkActiveClass配置全局，让 router-link-active用active代替

用Vue-router做一个导航

router–>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 one from '../components/pages/one'
import two from '../components/pages/two'



Vue.use(Router)

export default new Router({
  mode: "history",
  linkActiveClass:"active",
  routes: [{
      path: '/',
      name: 'index',
      component: Index
    },{
      path:'/course',
      name: 'course',
      component: Course,
      // 默认重定向进来就是one页面
      redirect: "/course/one",
      children:[
        {
           path:'one',
           name: 'one',
           component:one
        },
        {
          path:'two',
          name: 'two',
          component:two
        }
      ]
    },{
      path:'/master/:count/:type',
      name: 'master',
      component: Master
    }]
})

componest–>NavList.vue: 主导航栏，只在需要显示的选项中显示，通过params:{count:100,type:obj}，可以传递多个数据

<template>
    <div>
        <ul>
            <li><router-link exact to="/">首页</router-link></li>
            <li><router-link :to="{ path:'/course' }">课程</router-link></li>
            <!-- <li><router-link to="/master">专家</router-link></li> -->
            <!-- <li><router-link :to="{ name:'master',params:{count:100} }">专家</router-link></li>  -->
            <!-- <router-link :to="{ path: '/master', query: { count: 100 }}">专家</router-link> -->
            <li><router-link :to="{ name:'master',params:{count:100,type:obj} }">专家</router-link></li> 
        </ul>
    </div>
</template>

<script>
export default {
    name:"navlist",
    data(){
        return{
           obj:{
               name:"iwen"
           }
        }
    }
}
</script>

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

componest–>course.vue:分为左右两栏，点击左边选项，右边变成相应的页面

<template>
   <div>
      <NavList/>
      <div class="left">
          课程页面
          <ul>
              <li><router-link to="/course/one">111</router-link></li>
              <li><router-link to="/course/two">222</router-link></li>
              <li>333</li>
          </ul>
      </div>
      <div class="right">
          <router-view></router-view>
      </div>   
   </div>    
</template>

<script>

import NavList from "./NavList"
export default {
    name: "course",
    data(){
        return{

        }
    },
    components: {
      NavList
    }
}
</script>

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

components–>master.vue: 通过params来进行数据的接收

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

<script>
export default {
    name: "master",
    data(){
        return{

        }
    }
}
</script>

<style>

</style>

componest–>pages:里面是一些二级导航

    <template>
    <div>
        11111    
    </div>    
    </template>

    <script>

    export default {
        name: "one",
        data(){
            return{

            }
        }

    }
    </script>