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. Spark 系列（十三）—— Spark Streaming 与流处理

    一.流处理 1.1 静态数据处理 在流处理之前,数据通常存储在数据库,文件系统或其他形式的存储系统中.应用程序根据需要查询数据或计算数据.这就是传统的静态数据处理架构.Hadoop 采用 HDFS 进 ...

  2. GitHub Action一键部署配置，值得拥有

    最近由于自己的个人应用增加,每次都需要在服务器手动发布,觉得特别麻烦,所以想通过代码控制自动发布,直接选择了GitHub Action. GitHub Action持续集成服务,目前已经免费开放使用, ...

  3. HA 高可用集群概述及其原理解析

    HA 高可用集群概述及其原理解析 1. 概述 1)所谓HA(High Available),即高可用(7*24小时不中断服务). 2)实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件 ...

  4. 接口标记为@ResponseBody却不进入ResponseBodyAdvice

    一.背景: 我们的接口为了统一,在ResponseBodyAdvice中对返回值做统一处理,默认添加了errorNo和errorInfo字段返回. 最近同事改接口代码的时候,发现接口返回值是空的.乍一 ...

  5. ZK中使用JS读取客户端txt文件内容问题

    最近写一个需求时遇到一个问题,用户需要通过点击一个按钮直接读取他自己电脑上D盘的一个txt文件内容显示到页面,因为项目现在是用ZK写的.我对于ZK也是刚刚了解不就,很多都还不是很熟.起初我是想用io流 ...

  6. saleae逻辑分析仪-串口

    安装软件 下载:https://www.saleae.com 连线 逻辑分析仪CHx分别连接UART的rx和tx 配置Logic 选择串口 设置波特率 还可以自定义显示方式 打开串口助手 波特率和Lo ...

  7. viewer 图片点击放大 用法汇总

    A 不用viewer插件 1弹出框 https://www.cnblogs.com/web1/p/8989967.html 2表格中 https://www.jianshu.com/p/c17f4f6 ...

  8. Python学习日记(二十五) 接口类、抽象类、多态

    接口类 继承有两种用途:继承基类的方法,并且做出自己的改变或扩展(代码重用)和声明某个子类兼容于某基类,定义一个接口类interface,接口类中定义了一些接口名(就是函数名)且并未实现接口的功能,子 ...

  9. 交叉编译openssl1.1.1a

    ​ 交叉编译openssl1.1.1a的时候遇到的问题,记录一下,方便下次查找 一.下载源码 1.打开openssl官网,下载openssl-1.1.1.tar.gz源码包. 2.执行下面的命令解压源 ...

  10. Analysis of Autherntication Protocol with Scyther :Case Study ---补充整理

    1.Needham-Schroeder public Key Protocol (基于非对称的加密协议) the Protocol's authors are Roger NeedHam and Mi ...