时间: 2020-09-3|tag: 60次围观|0 条评论

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>

 效果图

vue路由DEMO插图1

 

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

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《vue路由DEMO
   

还没有人抢沙发呢~