vue router demo详解


Posted in Javascript onOctober 13, 2017

本文实例为大家分享了vue router demo代码,供大家参考,具体内容如下

<!doctype html><html lang="en">
<head>
  <meta charset="UTF-8" />
  <title> vue route demo</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
 <h1>Hello App!</h1>
 <p>
  <!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
 </p>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>

<script>
// 0. 如果使用模块化机制编程,???ue和VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
 routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
 router
}).$mount('#app')

// 现在,应用已经启动了!
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
js日期相关函数总结分享
Oct 15 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
js实现div色块碰撞
Jan 16 Javascript
JS实现的简单表单验证功能示例
Oct 13 #Javascript
javascript基于定时器实现进度条功能实例
Oct 13 #Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 #Javascript
详解如何去除vue项目中的#——History模式
Oct 13 #Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 #Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 #Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
详解JavaScript中的强制类型转换
2019/04/15 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python统计文章中单词出现次数实例
2020/02/27 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
我爱我的祖国演讲稿
2014/05/04 职场文书
党员个人自我评价
2015/03/03 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
纯html+css实现Element loading效果
2021/08/02 HTML / CSS