Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
2017-05-31 09:56
1631 查看
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 f925 (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
[/code]
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
[/code]
关于其全部设置,参考官方文档
最后将这个数组导出,如上面的代码
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
[/code]
这样的话,就将这个路由设置绑定给了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
[/code]
其中,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
[/code]
3、补完基本内容
在上一步,提到了a.vue和b.vue这两个子组件,创建他,随便写点什么即可,我们的目的是先让demo能跑起来,写好后放在components文件夹下(因为路径指向那里,也可以放在其他地方,随便你,只要在import时输入路径正确即可)此时,我们的文件结构应该如下:
src //文件夹,位于项目根目录下 |----App.vue //根组件 |----main.js //入口js文件,代码在执行的时候从这个文件夹第一行执行(即可以理解为根js文件,其他代码最终要汇总到这里) |----route-config.js //路由设置文件,组件都在这里被引入 | |----components //组件文件夹,规范的开发,组件一般都放这里面 | |----a.vue //随便写的组件a |----b.vue //随便写的组件b1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
[/code]
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
[/code]
使用异步组件的代码:
const b = resolve => require(['./components/b.vue'], resolve)1
1
[/code]
注: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
[/code]
3、DEMO链接
附一个DEMO的链接,解压缩后,运行npm install
安装,然后再运行
npm run dev
将项目跑起来,就可以见到效果了
或者直接运行对应的bat批处理文件也可以
百度云链接:http://pan.baidu.com/s/1qXYZNju
出处http://blog.csdn.NET/qq20004604
相关文章推荐
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- React第三方组件1(路由管理之Router的使用①简单使用)
- 使用Vue-Router 2实现路由功能
- vue-router路由的基础使用
- Vue.js路由组件vue-router使用方法详解
- 使用Vue-Router 2实现路由功能
- vue-router路由的基础使用
- 使用Vue-Router 2实现路由功能
- 使用vue-router完成简单导航功能【推荐】
- vue router2.0二级路由的简单使用
- 使用Vue-Router 2实现路由功能实例详解
- vue-router路由的基础使用
- Vue.js:使用Vue-Router 2实现路由功能介绍
- 使用Vue-Router 2实现路由功能
- vue.js路由vue-router(一)——简单路由基础
- 使用Vue-Router 2实现路由功能
- vue-router 路由基础简单介绍
- 使用Vue-Router 2实现路由功能