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. 最简单 无返回值 无参数 sql server存储过程

    CREATE proc Upadte_stateas update Table_1 set [state]=2 where id in (select id from Table_1 where st ...

  2. 5_PHP数组_3_数组处理函数及其应用_8_数组与数据结构

    以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 数组与数据结构 1. array_push() 函数 程序: <?php $stack = array(&q ...

  3. LVS简单理解

    LVS LVS(Linux Virtual Server)即Linux虚拟服务器 目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现了基于IP的数据请求负载均衡调度方案 终端用户 ...

  4. 【开发笔记】- Java读取properties文件的五种方式

    原文地址:https://www.cnblogs.com/hafiz/p/5876243.html 一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供j ...

  5. 浅谈Vue.js2.0某些概念

    Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统.   A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...

  6. js原型，原型链

    先铺垫下原型规则: 1.所有的引用类型(数组,对象,函数)都具有对象特性,可自由扩展属性(出了null外) 2.所有的引用类型(数组,对象,函数)都有一个__proto__属性(隐式原型),属性值是一 ...

  7. hash文件-对文件进行数字签名

    (一)windows自带hash命令: certutil -hashfile D:\1.exe MD5              #  md5的hash值为32位certutil -hashfile ...

  8. Flask之WTfroms组件

    一.WTfroms简介 WTForms插件是类似于django的form组件的插件,可以帮我们写标签,校验数据等. 二.安装与使用 安装: pip install WTForms 使用: from w ...

  9. Linux GRUB手动安装方法详解

    需要手工安装 GRUB 主要有两种情况: Linux 系统原先不是使用 GRUB 作为引导程序而现在想要使用 GRUB 来作为引导程序: MBR 中的引导程序被覆盖,需要在 MBR 中重新安装 GRU ...

  10. npm run build 时的 warning

    entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit ...