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: #;
}
div{
width: %;
height: 50px;
background: #F1F1F1;
line-height: 50px;
}
ul{
list-style: none;
}
ul li{
float: left;
margin: 20px;
}
</style>

效果图

vue路由DEMO的更多相关文章

  1. vue 路由demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  3. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  4. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  5. Vue路由(vue-router)详细讲解指南

    中文文档:https://router.vuejs.org/zh/ Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际 ...

  6. --@angularJS--一个简单的UI-Router路由demo

    1.index.html: <!DOCTYPE HTML><html ng-app="routerApp"><head>    <titl ...

  7. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  8. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  9. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

随机推荐

  1. mac osx 初次使用PHP环境搭建

    非常简单,一共2个步骤: Step1: 启动Apache mac osx 系统默认安装Apache服务. 首先打开terminal,输入: sudo apachectl start 如果需要输入密码, ...

  2. 第三周:构造一个简单的LINUX系统MENUOS

    吕松鸿 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.Linux内 ...

  3. c# WndProc事件 消息类型

    转载:https://www.cnblogs.com/idben/p/3783997.html WM_NULL = 0x0000; WM_CREATE = 0x0001;应用程序创建一个窗口 WM_D ...

  4. 第一个spring,第一天。

    陈志棚:界面跳转与框架 李天麟:游戏界面ui 徐侃:算法代码的设计 经过热烈的讨论后,我们各自在完成自己的任务.

  5. word count程序,以及困扰人的宽字符与字符

    一个Word Count程序,由c++完成,有行数.词数.能完成路径下文件的遍历. 遍历文件部分的代码如下: void FindeFile(wchar_t *pFilePath) { CFileFin ...

  6. 团队作业5——英语学习/词典App行业Top5

    来自权威研究机构易观智库的最新数据表明,国内几家主流词典类App市场的份额占比差异化分布进一步加剧. 对于156万安卓移动端活跃数字消费者的移动互联网行为监测结果显示,截至2014年8月底,有道词典A ...

  7. C#简述(二)

    详情请参考:http://www.runoob.com/csharp/csharp-operators.html 1.C# 运算符 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 ...

  8. Activiti源码:ActivitiEventSupport类中eventListeners的设计

    ActivitiEventSupport类成员eventListeners是使用CopyOnWriteArrayList实现的. public ActivitiEventSupport() { eve ...

  9. 转Git学习碰到的问题

    [原]Git学习碰到的问题 1.通过 windows 下的 gitbash 连接 github 时 $ ssh-keygen -t rsa -C "abcd@efgh.com" / ...

  10. ESXi主机性能问题

    服务器遇到一个问题 百度了下 基本发现是 四路的 windows 服务器的问题. 造成一些 性能降低. 然后查看了下几个虚拟机 的确是设置的4个虚拟插槽 根据百度的结果 要么改配置文件 要么改 这个四 ...