vue-router

<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
/* 创建路由器  */
var router = new VueRouter()

创建组件:

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

创建Router:

var router = new VueRouter()

映射路由:

router.map({'/home': { component: Home },'/about': { component: About }
})

key是路径,value是组件

<div class="list-group"><a class="list-group-item" v-link="{ path: '/home'}">Home</a><a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

v-link指令跳转到指定路径

<router-view></router-view>

启动路由

var App = Vue.extend({})
router.start(App, '#app')

router.start(App, ‘#app’) 表示router会创建一个App实例

创建组件:创建单页面应用需要渲染的组件
创建路由:创建VueRouter实例
映射路由:调用VueRouter实例的map方法
启动路由:调用VueRouter实例的start方法

使用v-link指令
使用标签

router.redirect

html

使用v-link指令
使用标签

router.redirect

router.redirect({
'/': '/home'
})

router.redirect方法用于为路由器定义全局的重定向规则

路径/home/news和/home/message

一个路径映射一个组件

<div>
<h1>home</h1>
<p>{{msg}}</p>
</div><ul class="nav nav-tabs">
<li>
<a v-link="{path: '/home/news'}"> News </a>
</li></ul>

组件构造器:

var Home = Vue.extend({
template: '#home',
data: function(){return {msg: 'hello'}}
})var News = Vue.extend({template: '#news'
})var Message = Vue.extend({template: '#message'
})

路由映射

router.map({
'/home': {
component: Home,
// 定义子路由
subRoutes: {
'/news': {component: News},'/message': {component: Message}}
},
'/about': {component: About
}
})
 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/> <link rel="stylesheet" href="assets/css/custom.css" /> </head> <body> <div id="app"> <div class="row"> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"> <h2>Router Basic - 02</h2> </div> </div> </div> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <div class="list-group"> <a class="list-group-item" v-link="{ path: '/home'}">Home</a> <a class="list-group-item" v-link="{ path: '/about'}">About</a> </div> </div> <div class="col-xs-6"> <div class="panel"> <div class="panel-body"> <router-view></router-view> </div> </div> </div> </div> </div> <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> <div> <ul class="nav nav-tabs"> <li> <a v-link="{ path: '/home/news'}">News</a> </li> <li> <a v-link="{ path: '/home/message'}">Messages</a> </li> </ul> <router-view></router-view> </div> </template> <template id="news"> <ul> <li>News 01</li> <li>News 02</li> <li>News 03</li> </ul> </template> <template id="message"> <ul> <li>Message 01</li> <li>Message 02</li> <li>Message 03</li> </ul> </template> <template id="about"> <div> <h1>About</h1> <p>This is the tutorial about vue-router.</p> </div> </template> </body> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script> var Home = Vue.extend({ template: '#home', data: function() { return { msg: 'Hello, vue router!' } } }) var News = Vue.extend({ template: '#news' }) var Message = Vue.extend({ template: '#message' }) var About = Vue.extend({ template: '#about' }) var router = new VueRouter() router.redirect({ '/': '/home' }) router.map({ '/home': { component: Home, // 定义子路由 subRoutes: { '/news': { component: News }, '/message': { component: Message
<a v-link="'home'"> home </a><a v-link="{ path: 'home' }">home</a><a v-link="{name: 'detail', params: {id: '01'} }">home</a>
$route.path
当前路由对象的路径$route.params
包含路由中的动态片段和全匹配片段的键值对$route.query
包含路由中查询参数的键值对$route.router
路由规则所属的路由器$route.name
当前路径的名字

执行以下命令安装vue cli

npm install -g vue-cli

使用vue-webpack-simple模板

运行Git Bash Here

vue init webpack-simple my-webpack-simple-demo

安装项目依赖

cd my-webpack-simple-demo
npm install

运行示例

npm run dev

发布

npm run build

使用vue-webpack模板

vue init webpack my-webpack-demo

安装依赖

cd my-webpack-demo
npm install

运行示例

npm run dev

发布

npm run build

请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

(17)打鸡儿教你Vue.js相关推荐

  1. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  2. (29)打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  3. (1)打鸡儿教你Vue.js

    当今世界不会Vue.js,前端必定路难走 一个JavaScript MVVM库 以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaScript/ES6/HTTP协议/V ...

  4. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  5. (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  6. (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  7. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  8. (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

  9. (13)打鸡儿教你Vue.js

    一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

最新文章

  1. 【leetcode】30. Substring with Concatenation of All Words
  2. 2.1.3 正则化(归一化)的用处以及何时使用
  3. hihocoder-Week243-hiho字符串
  4. HDU1214 圆桌会议(找规律,数学)
  5. (二)单元测试利器 JUnit 4
  6. typedef和define的用法和区别
  7. ssas 度量值属性_SSAS多维立方体中的初始属性和度量
  8. 【重点】LeetCode 24. Swap Nodes in Pairs
  9. opencv图片旋转90°/-90°/180°(网上很多转换,长宽出问题,这里可以长宽对其)
  10. HTML DOM Event(事件)
  11. Java中的关键字汇总(50个)
  12. 双11 背后的全链路可观测性:阿里巴巴鹰眼在“云原生时代”的全面升级
  13. 尔雅 科学通史(吴国盛) 个人笔记及课后习题 2018 第五章 欧洲科技文明的起源
  14. angular整合环信webIM
  15. 如何发布百度离线地图及二次开发API
  16. JavaScript之简繁体转化代码示例
  17. 短视频开发,录制视频添加背景音乐功能实现
  18. 在Excel中通过VBA实现不定区域的标准差计算
  19. php类中遍历中的rewind方法,PHP rewind( )用法及代码示例
  20. 单片机中如何将BCD码拆开_单片机中 BCD码转换

热门文章

  1. 格里高利历java_在Java、Javascript、Python中有没有好的框架可以将日历计算从格里高利历转换为希伯来日历?...
  2. matlab画简单曲线,并进行标注、图例、加网格,等操作
  3. oracle分区表的作用
  4. 数据集成的两种架构:ELT和ETL
  5. linux查看指定目录下各个文件大小以及总体大小
  6. LTE网络-EPC(分组核心网)
  7. 记一次服务器被植入木马/病毒:kdevtmpfsi
  8. 2G、3G要退出历史舞台了?为何3G比2G淘汰更快?
  9. 一起参与开源.共同打造海派开源潮流社
  10. 记录一次h5上传身份证照片、上传人面像