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. （29）打鸡儿教你Vue.js

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

  2. （26）打鸡儿教你Vue.js

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

  3. （22）打鸡儿教你Vue.js

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

  4. （21）打鸡儿教你Vue.js

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

  5. （19）打鸡儿教你Vue.js

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

  6. （18）打鸡儿教你Vue.js

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

  7. （15）打鸡儿教你Vue.js

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

  8. （13）打鸡儿教你Vue.js

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

  9. （12）打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

随机推荐

  1. GOF 的23种JAVA常用设计模式总结 02 UML中的类图与类图之间的关系

    统一建模语言UML 统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际 ...

  2. SYBASE扩充日志段空间

    有时候日志段空间满了使用下列语句也无济于事,又不能直接重启库,就加空间应急,dump tran QAS with truncate_only dump tran QAS with no_log sp_ ...

  3. python爬虫 urllib模块url编码处理

    案例:爬取使用搜狗根据指定词条搜索到的页面数据(例如爬取词条为‘周杰伦'的页面数据) import urllib.request # 1.指定url url = 'https://www.sogou. ...

  4. [LeetCode] 25. K 个一组翻转链表 ☆☆☆☆☆(链表)

    https://leetcode-cn.com/problems/reverse-nodes-in-k-group/solution/javadi-gui-fang-fa-100-by-chadriy ...

  5. kafka原理与组件

    一．什么是kafkakafka的目标是实现一个为处理实时数据提供一个统一.高吞吐.低延迟的平台.是分布式发布-订阅消息系统,是一个分布式的,可划分的,冗余备份的持久性的日志服务.Kafka使用场景:1 ...

  6. mybatis中对数据表操作的四种语法

    查询数据(select) select...from...where... 如:查询学生表中学号为某数的学生的全部信息 select * from stu where id=#{id} 增加数据(in ...

  7. Python入门篇-基础语法

    Python入门篇-基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编程基础 1>.程序 一组能让计算机识别和执行的指令. 程序 >.算法+ 数据结构= 程 ...

  8. 使用ansible部署CDH 5.15.1大数据集群

    使用ansible离线部署CDH 5.15.1大数据集群 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在此之前,我之前分享过使用shell自定义脚本部署大数据集群,不管是部署CD ...

  9. HTML&CSS基础-字体的样式

    HTML&CSS基础-字体的样式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

  10. Spring4- 01 - Spring框架简介及官方压缩包目录介绍- Spring IoC 的概念 - Spring hello world环境搭建

    一. Spring 框架简介及官方压缩包目录介绍 主要发明者:Rod Johnson 轮子理论推崇者: 2.1 轮子理论:不用重复发明轮子. 2.2 IT 行业:直接使用写好的代码. Spring 框 ...