vue路由DEMO

index.js,index.vue,course.vue,master.vue等

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>

 效果图

 

转载于:https://www.cnblogs.com/wordblog/p/10520690.html