vue init webpack vue-router-test

<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>

<template><div><NavList/>首页</div>
</template><script>import NavList from "./NavList";export default {name: "index",components: {NavList},data() {return {}}}
</script><style scoped></style>

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

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

<template><div>java</div>
</template><script>export default {name: "java"}
</script><style scoped></style>

<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>

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

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

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

<template><div>专家: {{ $route.params.count }} - {{ $route.params.type.name }}</div>
</template><script>export default {name: "master"}
</script><style scoped></style>

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

  .active {color: red}

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