您的位置：首页 > 产品设计 > UI/UE

Vue的路由功能（1）简单路由与vue-router的基础使用（同步/异步组件）

2017-03-01 09:17 1486 查看


Vue.js的路由功能

前注：

Vue.js 1.0和2.0都支持路由，但我这里主要是面对2.0版本来写，因为应用了render方法

Vue-router的版本也是2.x+，某些api和1.x有所不同


最简单的路由


1、原理：

通过控制父组件一个路由变量的值，来动态改变指向的组件；

而被指向的组件又通过render方法被渲染到父组件中，因此当指向组件改变时，被渲染的组件也随之改变；

因此，就相当于通过控制一个变量来实现了路由的效果；


2、核心：

通过render方法来写，比较优雅。事实上也可以通过template标签来写，但这样写的话，就会像之前解释render方法的用处一样，会写很多额外的代码（通过v-if写在标签里，来判断到底渲染哪个组件）；


3、示例代码：（在官方示例上修改）

<!DOCTYPE html>
<html>
<head>
<title>Vue的render方法说明</title>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
</head>
<body>
<button onclick="change()">点击更改显示的路由组件</button>
<br>
<div id="app">

</div>

<script>
const NotFound = {template: '<p>Page not found</p>'}
//  被注释掉了这2行代码，也是可以生效的
//  const Home = {template: '<p>home page</p>'}
//  const About = {template: '<p>about page</p>'}
const Home = "input";
const About = "textarea";
const routes = {
'/': Home,
'/about': About
}
var demo = new Vue({
el: '#app',
data: {
currentRoute: "/"
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) {
return h(this.ViewComponent)
}
})
function change() {
var r = demo.currentRoute
if (r === '/')
demo.currentRoute = '/about'
else if (r === '/about')
demo.currentRoute = "/a"
else
demo.currentRoute = "/"
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


4、代码解释：

a. 路由是routes变量，他通过不同的key指向不同的标签名（或标签）；

b. 路由变量被引入computed属性ViewComponent中，和data属性中的currentRoute进行绑定（因为是computed属性中的变量），

c. 而ViewComponent被render方法的回调函数引入，作为渲染时的参数。

routes包含不同组件 → currentRoute作为routes的key → currentRoute通过computed引入给ViewComponent → ViewComponent作为render方法的回调函数的参数；

从而通过改变currentRoute的值决定选用routes中的不同组件


开始使用vue-router 2.0


0、创建工程

建议从这一步开始，重新创建一个新工程。
特别是在自身代码基础上修改遇见bug的，从这一步出发比较稳妥。
Node版本最好在6.X+，npm版本在3.X+

先克隆一个webpack的vue项目，在命令行中输入以下代码（最后的my-webpack-simple-demo是你的项目名称，前面不要改）
vue init webpack-simple my-webpack-simple-demo
注意，如果在后来运行时，sass出现问题（比如我就遇见了，貌似是因为下载的问题），那么在启用sass那一步输入no

创建好后，根据提示依次输入（注意提示，比如你项目名称不一样的话，cd这一步就不要完全照搬了）
cd my-webpack-simple-demo
npm install
npm run dev
此时，工程就可以跑起来了。在npm install这一步比较消耗时间

运行npm run dev这一步命令后，浏览器会自动弹出窗口，如果能正常看到页面，说明一切正常。
如果没有弹出窗口，打开浏览器，输入地址：http://localhost:8080/ 来查看，效果是一样的。
如果看不到页面，一般情况下，是npm下载包的时候出错了，重新npm install吧


1、安装：

a. 通过script标签引入：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>


b. 使用在工程中：
npm install vue-router -save
先安装到工程中，
然后在引入Vue的地方，同时引入vue-router，并且use这个vue-router，例如：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
以上这段代码，通常放在main.js中

注意，如果是通过script标签引入，则无需Vue.use(VueRouter)这一步


2、在工程中使用

（非工程中，即hmtl里使用有官方文档参考，我重点写当用在工程里时怎么启用）

a. 首先，所有组件全部导入到一个路由设置文件里，例如 route-config.js 这个文件中。 

在这个文件中，引入所有组件（除根组件），然后可以将这些组件放入一个数组中，这个数组可以以如下形式存在：
//route-config.js

import a from './components/a.vue'
import b from './components/b.vue'

export default [
{path: '/a', component: a},
{path: '/b', component: b}
]
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

关于其全部设置，参考官方文档

最后将这个数组导出，如上面的代码

b. 在上一步中导出的对象，在main.js中引入；

c. 在main.js中创建一个VueRouter对象，然后将上一步导入的对象在创建时导入给他，参数是routes，如以下代码：
import routeConfig from './route-config'

// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes: routeConfig
})
1
2
3
4
5
6
1
2
3
4
5
6

这样的话，就将这个路由设置绑定给了VueRouter对象，然而，我们还需要将VueRouter对象和Vue的实例link起来

d. 至今为止，我们让Vue和Vue-router绑定起来了，还有了一个描述路由的数组。那么，我们需要让这个路由对我们的组件生效起来。

我们还缺一个根组件，在之前通常App.vue作为根组件，因此，我们也将App.vue作为根组件，然而我们还需要导入路由，因此通过如下代码来完成：
const app = new Vue(Vue.util.extend({router}, App)).$mount('#app')
1
1

其中，Vue.util.extend这个方法的作用是起到mixin的效果，即将App.vue的属性添加到router之中。然后将这个router传递给新创建的Vue的实例。

然后通过$mount(‘#app’)挂载到 
id="app"
 的dom里

附上main.js的完整代码：
//main.js
/*
* 1. 先导入vue，再导入vue-router，然后调用Vue.use(VueRouter)来启用Vue-router插件
* 2. vue的路由设置是统一写在router-config这个文件里的，
* 3. 将路由传给VueRouter的实例
* 4. 该实例里混入根组件，然后传递给Vue的实例
* 5. Vue实例挂载到页面之中
* */
import Vue from 'vue'
import VueRouter from 'vue-router'
import routeConfig from './route-config'
import App from './App.vue'
Vue.use(VueRouter)

// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes: routeConfig
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue(Vue.util.extend({router}, App)).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


3、补完基本内容

在上一步，提到了a.vue和b.vue这两个子组件，创建他，随便写点什么即可，我们的目的是先让demo能跑起来，写好后放在components文件夹下（因为路径指向那里，也可以放在其他地方，随便你，只要在import时输入路径正确即可）

此时，我们的文件结构应该如下：
src    //文件夹，位于项目根目录下
|----App.vue    //根组件
|----main.js    //入口js文件，代码在执行的时候从这个文件夹第一行执行（即可以理解为根js文件，其他代码最终要汇总到这里）
|----route-config.js    //路由设置文件，组件都在这里被引入
|
|----components    //组件文件夹，规范的开发，组件一般都放这里面
|
|----a.vue    //随便写的组件a
|----b.vue    //随便写的组件b
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10


4、DEMO链接

附一个DEMO的链接，解压缩后，运行
npm install


安装，然后再运行
npm run dev


将项目跑起来，就可以见到效果了

百度云链接：http://pan.baidu.com/s/1nuMo7Br


vue-router 2.0的异步组件


1、概述

简单来说，异步组件指在需要的时候，才去下载那个组件而不是无论需要与否，都直接下载到本地。

假如一个页面有100个组件，用户访问这个页面时，显然不需要将所有组件都下载到本地，例如他刚进入这个页面时，只需要访问header、login、footer这3个组件。

这个时候，我们就将其他97个组件变为异步组件，即只要在需要的时候，才从服务器将这些组件打包下载到本地。

异步组件要求使用 webpack， 注意，Browserify 在默认情况下是不支持的，除非使用一些特殊办法，具体请查看官网说明。


2、方法

在工程项目中，我们有一个路由设置文件，在这个文件里，我们引入了各种组件。

在那个路由设置文件里，我们引入了除了根组件之外的所有组件。

将组件设置为异步组件，只需要修改其引入组件的方式即可。

原代码：
import b from './components/b.vue'
1
1

使用异步组件的代码：
const b = resolve => require(['./components/b.vue'], resolve)
1
1

注：resolve是component中作为参数传递的回调函数。

附 route-config.js 文件完整代码（相对于同步组件，其他文件保持不变）
// 同步组件a
import a from './components/a.vue'
// import b from './components/b.vue'
// 异步组件b
// 异步写法如下
const b = resolve => require(['./components/b.vue'], resolve)

export default [
{path: '/a', component: a},
{path: '/b', component: b}
]
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11


3、DEMO链接

附一个DEMO的链接，解压缩后，运行
npm install


安装，然后再运行
npm run dev


将项目跑起来，就可以见到效果了

或者直接运行对应的bat批处理文件也可以

百度云链接：http://pan.baidu.com/s/1qXYZNju

出处http://blog.csdn.net/qq20004604
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航