(17)打鸡儿教你Vue.js
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相关推荐
- (18)打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- (29)打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- (1)打鸡儿教你Vue.js
当今世界不会Vue.js,前端必定路难走 一个JavaScript MVVM库 以数据驱动和组件化的思想构建的 Vue.js是数据驱动 HTML/CSS/JavaScript/ES6/HTTP协议/V ...
- (26)打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- (22)打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- (21)打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- (15)打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
最新文章
- 【leetcode】30. Substring with Concatenation of All Words
- 2.1.3 正则化(归一化)的用处以及何时使用
- hihocoder-Week243-hiho字符串
- HDU1214 圆桌会议(找规律,数学)
- (二)单元测试利器 JUnit 4
- typedef和define的用法和区别
- ssas 度量值属性_SSAS多维立方体中的初始属性和度量
- 【重点】LeetCode 24. Swap Nodes in Pairs
- opencv图片旋转90°/-90°/180°(网上很多转换,长宽出问题,这里可以长宽对其)
- HTML DOM Event(事件)
- Java中的关键字汇总(50个)
- 双11 背后的全链路可观测性:阿里巴巴鹰眼在“云原生时代”的全面升级
- 尔雅 科学通史(吴国盛) 个人笔记及课后习题 2018 第五章 欧洲科技文明的起源
- angular整合环信webIM
- 如何发布百度离线地图及二次开发API
- JavaScript之简繁体转化代码示例
- 短视频开发,录制视频添加背景音乐功能实现
- 在Excel中通过VBA实现不定区域的标准差计算
- php类中遍历中的rewind方法,PHP rewind( )用法及代码示例
- 单片机中如何将BCD码拆开_单片机中 BCD码转换