Vue踩坑之Vue-router

照着教程学习Vue,由于教程使用的是Vue1,但是我用npm安装的是2.0版本,所以开始了踩坑之旅

关于Vue-router2

我直接用npm安装的模板是这样的

这里是直接有个router文件夹的,路由的信息都在这里面的index.js文件里面

这是原来的路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue';
import Router from 'vue-router';
import Hello from 'components/Hello';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
components: {
default: Hello
}
}
]
});

可以看出path: '/'就是根目录下的组件,默认是Hello,如果我们想在页面中再引入一个组件,就可以直接在这个path目录下写,比如我们再加个header组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue';
import Router from 'vue-router';
import Hello from 'components/Hello';
// 导入组件
import Header from 'components/header/header';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
components: {
default: Hello,
// 注册组件,命名为Header
Header: Header
}
}
]
});

然后在App.vue文件内写入就好了

1
<router-view name="Header"></router-view>

不同的组件以name区分,所以要记得带上name,默认的就可以省略。

不同地址的组件

比如我们要实现点击跳转到该组件

不同页面之间的组件

仍然在router文件夹里的index.js文件内,继续配置router信息就可以了

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
import Vue from 'vue';
import Router from 'vue-router';
import Hello from 'components/Hello';
import Header from 'components/header/header';
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
components: {
default: Hello,
Header: Header
}
},
{
// 地址
path: '/goods',
components: {
default: goods
}
},
{
path: '/ratings',
components: {
default: ratings
}
},
{
path: '/seller',
components: {
default: seller
}
}
]
});

然后在App.vue里使用

1
2
3
4
5
// 这里相当于一个a标签
<router-link to="/goods">商品</router-link>
// 然后在相应的区域里显示
<router-view></router-view>

以上代码均可以在我的Github找到。

努力<br><br>希望能成为一名前端工程师<br>加油