首页 > 代码库 > Vue1.0学习总结(5)———vue-router的使用
Vue1.0学习总结(5)———vue-router的使用
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="http://www.mamicode.com/bower_components/vue/dist/vue.js"></script>
7 <script src="http://www.mamicode.com/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里面去改的
Vue1.0学习总结(5)———vue-router的使用