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 相关文章推荐
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
实现高性能javascript的注意事项
May 27 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
$()JS小技巧
2007/07/21 Javascript
js常见表单应用技巧
2008/01/09 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers