vue路由DEMO

import Vue from 'vue'import Router from 'vue-router'import Index from '@/components/index'import Course from '@/components/course'import Master from '@/components/master'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>        主页    </div></template><script>    export default{        name:"index",        data(){            return{            }        }    }</script><style scoped>    </style>

<template>    <div>        课程页面    </div></template><script>    export default{        name:"course",        data(){            return{            }        }    }</script><style scoped>    </style>

<template>    <div>        <ul>            <li>                <router-link to="/">首页</router-link>            </li>            <li>                <router-link to="/course">课程</router-link>            </li>            <li>                <router-link to="/master">专家</router-link>            </li>        </ul>    </div></template><script>    export default{        name:"navlist",        data(){            return{            }        }    }</script><style scoped>    a{        text-decoration: none;        color: #333;    }    div{        width: 100%;        height: 50px;        background: #F1F1F1;        line-height: 50px;    }    ul{        list-style: none;    }    ul li{        float: left;        margin:0 20px;    }</style>