vue-router的使用：
vue—>适合在单页面的应用，即适合SPA开发
vue-resource: 交互
vue-router: 路由
下载：因为这里用的是vue1.0,所以下载vue-router0.7.13版本，后面会继续讲解vue2.0
查看版本信息：bower info 包名
下载：bower install vue-router
下面讲解vue1.0中vue-router使用的步骤：
主页：/home
新闻：/news
html代码：
<li><a v-link="{path:'/home'}">主页</a></li> // 页面跳转链接，这里并不用href
<router-view></router-view> //显示内容
js代码：
<script type="text/javascript">
//1、准备一个根组件
var App=Vue.extend();
//2、准备Home、news的组件
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3、准备路由
var router=new VueRouter();
//4、关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5、启动路由
router.start(App,'#box');
//6、跳转
router.redirect({
'/':'home'
});
</script>
--------------------------------------------------------
路由嵌套(多个路由的使用)
html代码:
<div id="box">
<ul>
<li><a v-link="{path:'/home'}">主页</a></li>
<li><a v-link="{path:'/news'}">新闻</a></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<template id="home">
<h3>我是主页</h3>
<ul>
<li><a v-link="{path:'/home/login'}">登录</a></li>
<li><a v-link="{path:'/home/register'}">注册</a></li>
</ul>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>我是新闻</h3>
</template>
js代码:
<script type="text/javascript">
window.onload=function(){
//1、准备一个根组件
var App=Vue.extend();
//2、准备Home、news的组件
var Home=Vue.extend({
template:'#home'
});
var News=Vue.extend({
template:'#news'
});
//3、准备路由
var router=new VueRouter();
//4、关联
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>这是登录页面</strong>'
}
},
'register':{
component:{
template:'<strong>这是注册页面</strong>'
}
}
}
},
'news':{
component:News
}
});
//5、启动路由
router.start(App,'#box');
//6、跳转
router.redirect({
'/':'home'
});
}
</script>
---------------------------------------------------------------------------------------
获取路由的其他信息：(比如在登录时，在路由上显示是谁登录)
{{$route.params |json}} //获取传过来的参数，如依靠后台数据库id来显示信息
{{$route.path}} //显示当前路径
{{$route.query |json}} //显示当前查询的信息
---------------------------------------------------------------------------------------
示例1：vue-router的综合应用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="bower_components/vue/dist/vue.js"></script>
7 <script src="bower_components/vue-router/dist/vue-router.js"></script>
8 <style>
9 .v-link-active{ 10 font-size: 20px; 11 color: #f60; 12 } 13 </style>
14 </head>
15 <body>
16 <div id="box">
17 <ul>
18 <li>
19 <a v-link="{path:'/home'}">主页</a>
20 </li>
21 <li>
22 <a v-link="{path:'/news'}">新闻</a>
23 </li>
24 </ul>
25 <div>
26 <router-view></router-view>
27 </div>
28 </div>
29
30 <template id="home">
31 <h3>我是主页</h3>
32 <div>
33 <a v-link="{path:'/home/login/yufan'}">登录</a>
34 <a v-link="{path:'/home/reg/yfstrive'}">注册</a>
35 </div>
36 <div>
37 <router-view></router-view>
38 </div>
39 </template>
40 <template id="news">
41 <h3>我是新闻</h3>
42 <div>
43 <a v-link="{path:'/news/detail/001'}">新闻001</a>
44 <a v-link="{path:'/news/detail/002'}">新闻002</a>
45 </div>
46 <router-view></router-view>
47 </template>
48 <template id="detail">
49 {{$route.params | json}} 50 <br>
51 {{$route.path}} 52 <br>
53 {{$route.query | json}} 54 </template>
55 <script>
56 //1. 准备一个根组件
57 var App=Vue.extend(); 58
59 //2. Home News组件都准备
60 var Home=Vue.extend({ 61 template:'#home'
62 }); 63
64 var News=Vue.extend({ 65 template:'#news'
66 }); 67
68 var Detail=Vue.extend({ 69 template:'#detail'
70 }); 71
72 //3. 准备路由
73 var router=new VueRouter(); 74
75 //4. 关联
76 router.map({ 77 'home':{ 78 component:Home, 79 subRoutes:{ 80 'login/:name':{ 81 component:{ 82 template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
83 } 84 }, 85 'reg':{ 86 component:{ 87 template:'<strong>我是注册信息</strong>'
88 } 89 } 90 } 91 }, 92 'news':{ 93 component:News, 94 subRoutes:{ 95 '/detail/:id':{ 96 component:Detail 97 } 98 } 99 } 100 }); 101
102 //5. 启动路由
103 router.start(App,'#box'); 104
105 //6. 跳转
106 router.redirect({ 107 '/':'home'
108 }); 109 </script>
110 </body>
111 </html>
vue-loader的介绍：
webpack:模块加载器,一切东西都是模块,最后打包到一块
vue-loader:基于webpack,文件后缀名为.vue
.vue文件：放置的是vue组件代码,由三部分组成
<template>
html代码
</template>
<style>
css代码
</style>
<script>
js代码 (平时的代码,ES6),由于ES6浏览器支持不太好,
所以可能会用到babel-router来编译ES6
</script>
--------------------------------------------------
学习：手动配置webpack+vue-loader
构建webpack 的简单目录结构(详细请见vue-router文件夹)
|-index.html
|-main.js 文件的入口
|-App.vue vue文件
|-package.json 工程文件(项目依赖,名称,配置)——>可由npm init --yes 生成
|-webpack.config.js webpack的配置文件
webpack的准备工作：
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
解析App.vue文件 -->需要变成正常的代码浏览器才可以解读,
这时需要用到vue-loader@8.5.4 //这里用的是vue1.0版本
cnpm install vue-loader@8.5.4 --save-dev
解析html,css,js代码
cnpm install vue-html-loader --save-dev
vue-html-loader,css-loader vue-style-loader,vue-hot-reload-api@1.3.2
babel所需要的插件：
babel-loader,babel-core,babel-plugin-transform-runtime,babel-preset-es2015,babel-runtime
下载最最核心的vue
cnpm install vue@1.0.28 --save
运行：npm run dev
-----------------------------------------------
ES6:模块化开发
导出模块:export default{}
导入模块:import 模块名 from 地址
-----------------------------------------------------
脚手架vue-cli版本介绍：
vue-cli --> vue的脚手架(帮你提供好了基本的项目结构)
webpack#1.0/2.0 -->不用Eslint检测
webpack-simple#1.0/2.0 --->没有代码检查和单元测试
------------------------------------------------------
webpack基本的使用流程
1.npm install vue-cli -g 安装vue命令环境
如何验证已经安装？---输入vue--version
2.生成项目模板
vue init <模板名> 本地的项目名称
3.进入到生成目录里面
cd xxx
npm install
4.npm run dev
改端口的---端口在config/index.js里面去改的