尝试使用Vue.js(三)引入vue-router

尝试使用Vue.js(三)引入vue-router

用‘vue’尝试写了个小Demo,熟悉一下vue的流程,和vue生态圈里的‘vue-router’、‘vuex’等。
Demo的在线预览地址
Demo的github代码地址
这篇文章介绍下载‘vue-cli’脚手架基础上 引入vuex和router


分下面一点介绍:

  1. vue-router的使用
  2. vuex使用

vue-router:

前端单页面,全异步开发,那么路由这块的控制就自然由前端接管了,那么说说我这个demo中 router的引用。

1.引入 ‘vue-router’:(vue-cli生成的工程基础上)

首先:npm install vue-router
注:如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能,如这样:

1
2
3
4
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.看下demo中如何用的:

首先:新建一个 ‘src/router/router.js’这个文件的内容如下:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import Vue from 'vue'; //引入vue
import VueRouter from 'vue-router'; //引入 vue-router
Vue.use(VueRouter); //此应用安装router功能
/**
* 路由的设置(这里是路由的主要设置,也就是说设置 哪个url和具体所渲染那个组件)
*
* @method module:src/router/router#routes
* @returns {obj}
*/
const routes = [
{
path: "/index",
name: "index",
component: (resolve) => {
// 特殊说下,这些写就会把每个路由对应的的代码单独打包,
// 减少首屏js代码过大的问题
require(["../pages/index.vue"], resolve);
}
},
{
path: "/happy",
name: "happy",
component: (resolve) => {
require(["../pages/happy.vue"], resolve);
}
},
{
path: "/weather",
name: "weather",
component: (resolve) => {
require(["../pages/weather.vue"], resolve);
}
},
{
path: "/robot",
name: "robot",
component: (resolve) => {
require(["../pages/robot.vue"], resolve);
}
},
{
path: "/music",
name: "music",
component: (resolve) => {
require(["../pages/music.vue"], resolve);
}
},
{
path: "/about",
name: "about",
component: (resolve) => {
require(["../pages/about.vue"], resolve);
}
},
{
path: '*',
redirect: {
name: "index",
},
},
];
/**
* 实例化路由(在这个文件里把router直接实例化,暴露出去供APP直接用)
*
* @method module:src/router/router#VueRouter
* @returns {obj}
*/
export default new VueRouter({
mode: "hash",
routes: routes
});

上面这段代码说两个注意点:

  • 1
    2
    3
    component: (resolve) => {
    require(["../pages/music.vue"], resolve);
    }

    这种写法是为了减少首屏js代码量,单独打包每个路由下的代码,如果不想这么写,
    也可以在文件里直接 import 对应的组件。

  • 代码最后 export default new VueRouter()暴露一个实例化的router,是方便外界使用。

router.js写好以后,就是在’src/main.js’ 应用router:

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import App from './App'
import router from './router/router'; //引入router(而且是已经实例化的)
/* eslint-disable no-new */
new Vue({
router, //实例化APP时 直接传入router
render: h => h(App)
}).$mount("#app");

把刚才写好的‘src/router/router.js’ 引入,在实例化 Vue App的时候直接当做属性使用,就OK了!

具体实现可以看下 Demo的github代码地址 中的‘src/router/router’ 和 ‘src/main’ 两个文件

大家如果看了文章,可以留言,一起交流

作者 [@sha Qihe]

2016 年 12月 22日