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. 14 Scroll 滚动搜索

      Scroll的用法: 第一次搜的时候,要指定 快照保留时间1min,分页的大小:2条/页: 对于第一次搜索,ES会返回一个这个scroll的id: 下次再搜的时候,就带着这个scrollid去搜就 ...

  2. 使用springboot实现一个简单的restful crud——02、dao层单元测试，测试从数据库取数据

    接着上一篇,上一篇我们创建了项目.创建了实体类,以及创建了数据库数据.这一篇就写一下Dao层,以及对Dao层进行单元测试,看下能否成功操作数据库数据. Dao EmpDao package com.j ...

  3. js --桥接模式

    定义: 将抽象部分与它的实现部分分离,使他们都可以独立的变化. 也就是说,桥接模式里面有两个角色: - 扩充抽象类 - 具体实现类 在写桥接模式之前,想在写一下关于抽象的理解.我觉得抽象这个概念过于抽 ...

  4. c#使用正则表达式处理字符串

    正则表达式可以灵活而高效的处理文本,可以通过匹配快速分析大量的文本找到特定的字符串. 可以验证字符串是否符合某种预定义的格式,可以提取,编辑,替换或删除文本子字符串. 现在如下特定的字符串: stri ...

  5. git提交代码并将develop分支合并到master分支上

    提交合并代码流程: git add .git commit -m ''git pushgit checkout mastergit merge develop //将develop 分支与master ...

  6. ansible之基础篇(二)

    软件相关模块 yum rpm和yum的区别 rpm:redhat package manager yum 可以解决依赖关系 yum 源配置 使用yum下载时需要先下载epel [epel] name= ...

  7. mysql学习之基础篇05

    mysql中的统计函数: 1. 查询商品价格中最高的价格: select max(shop_price) from goods; 2. 查询商品价格中最低的价格: select min(shop_pr ...

  8. CentOS7.x-lnmp环境下安装Discuz论坛

    1.安装lnmp.这里采用一键安装的包 yum -y install wget wget http://soft.vpser.net/lnmp/lnmp1.6-full.tar.gz 2.加压安装ln ...

  9. 使用ImageMagick在Linux系统上截图

    ImageMagick安装指令: sudo apt-get install imagemagick 安装完成后,输入 import screenshot.png 命令就可以开始截图.此时鼠标图标会变成 ...

  10. QT生成的exe在其他电脑打开

    首先说一下我的开发的平台:vs2017+QT5.9 我们首先先用release版本来编译一下程序,然后我们得到了一个exe程序但是这个程序是不能脱离你的平台,甚至是不能脱离你所在的文件夹,这是因为它需 ...