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 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
python访问抓取网页常用命令总结
2017/04/11 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
python实现计算器功能
2019/10/31 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
python操作redis数据库的三种方法
2020/09/10 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
小学生家长评语集锦
2014/01/30 职场文书
敬老院标语
2014/06/27 职场文书
新员工考核评语
2014/12/31 职场文书
大学生在校表现评语
2014/12/31 职场文书