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. java之struts2的配置讲解（2）

    在 java之struts框架入门教程 基础上,进行下列操作 1.结构对比 原来的项目结构图 现在的结构图 即从结构上可以看出,在HelloStruts项目中增加了config 文件夹(Source ...

  2. 《Linux》跟老男孩学Linux核心系统命令

    一.命令行简介 1.1 Linux 命令行提示符介绍 [root@root_pc ~]# #<==这是超级管理员root用户对应的命令行 [oldboy@oldboy_pc ~]$ #<= ...

  3. QString 转 LPCWSTR

    遍历文件的时候遇到的一个问题,百度了好久才搞定,这个是可用的,所以总结下来. QString 转 LPCWSTR QString path1 = path + "\\*"; con ...

  4. C# Microsoft.Office 操作Excel总结

     1.导入命名空间:  using Microsoft.Office.Interop.Excel; 2.如何打开已有excel文档,或者创建一个新的excel文档  Application app = ...

  5. 修改网口速度mii-tool和ethtool

    mii-tool # mii-tool -F 100baseTx-FD media: 100baseT4, 100baseTx-FD, 100baseTx-HD, 10baseT-FD, 10base ...

  6. C#-判断字符是否是全角半角

    C#字符串的全角是指用二个字节来表示的一个字符 C#字符串的半角是用一个字节来表示的一个字符 这样的话我们就可以用string.length 和System.text.Encoding.Default ...

  7. kubernetes-使用Nginx配置ingress-controllers

    下载 Nginx Ingress Controller 配置文件: wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/ma ...

  8. ipsec][strongswan] ipsec SA创建失败后的错误处理分析

    〇 ike协商的过程最终是为了SA的建立, SA的建立后, 在底层中管理过程,也是相对比较复杂的. 这里边也经常会出现失败的情况. 我们以strongswan为例, 在strongswan的底层SA管 ...

  9. zabbix Server 4.0 监控TCP的12种状态

      zabbix Server 4.0 监控TCP的12种状态 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家对TCP三次握手比较熟悉了,都知道当发生DOSS攻击时,客户端发送 ...

  10. C++（三十五） — 运算符重载

    运算符重载的实质:函数重载.除了增加一个关键字 operator 外,与函数重载没有区别,都是通过该类的某个对象来访问重载运算符. (1)重载运算符时,运算符运算顺序和优先级不变,操作数个数不变: ( ...