Vue2精简教程

第一课

第一步:打开HBuilder X,新建项目。

创建项目

等文件下载完后,进入项目,这时如果直接运行npm run serve,会报错,别急。

打开package.json文件,找到下面的代码:

1
2
3
4
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},

修改成这样:

1
2
3
4
"scripts": {
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},

此时运行npm run serve,就会看到欢迎页面了

现在要安装路由,在终端里运行npm install -S vue-router@3.5.3

现在在src里面新建一个文件,文件名为MainView.vue

里面输入代码:

1
2
3
4
5
6
7
8
9
10
11
<template>
<div>
<router-view></router-view>
</div>
</template>

<script>
</script>

<style>
</style>

有几点要注意:

1.<template>里只能有一个元素。

2.此文件是所有页面的父页面,这里输入内容会显示在所有页面上。

然后,在src目录里新建router文件夹,并在文件夹里面新建Main1.js文件,在文件里输入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

import MainView from "../MainView.vue"


const routes2 = [{
path: '/',
redirect: '/menu', //重定向
component: MainView,
}
]


const router = new VueRouter({
"routes": routes2
})
export default router;

现在打开src目录下的main.js,修改为下面内容:

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from 'vue'
import App from './MainView.vue'

import router2 from './router/Main1.js'

Vue.config.productionTip = false //一般在生产环境下设置为false值,可以减少控制台输出

new Vue({
render: h => h(App),
router:router2,
}).$mount('#app')

现在我们打开浏览器,会自动重定向到/menu页面,由于MainView.vue是所有页面的父页面,所以现在会显示MainView.vue里的内容。

第二课

现在src文件夹里新建views文件夹,在views文件夹里新建Menu.vue文件,在文件里写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div>
<h1>这是一个简单的目录</h1>
<h2><router-link to="/p1_main">点此进入第一个页面</router-link></h2>
<h2><router-link to="/p2">点此进入Vue示例目录2</router-link></h2>
<h2><router-link to="/p3">点此进入element-ui示例页面</router-link></h2>
<h2><router-link to="/p4">点此进入Axios示例目录</router-link></h2>
</div>
</template>

<script>
</script>

<style>
</style>

打开Main1.js文件,在上面添加一行:import Menu from "../views/Menu.vue"

在routes2变量中追加:

1
2
3
4
, {
path: '/menu',
component: Menu,
}

最后Main1.js文件是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

import MainView from "../MainView.vue"
import Menu from "../views/Menu.vue"


const routes2 = [{
path: '/',
redirect: '/menu', //重定向
component: MainView,
}, {
path: '/menu',
component: Menu,
}]


const router = new VueRouter({
"routes": routes2
})
export default router;

现在我们可以看到一个目录页面了。

第三课

在views文件夹里新建P1_Main.vue文件,写入以下内容:

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
<template>
<div>
<h1>这是一个最简单的页面</h1>
<h1><router-link to="/menu">主目录</router-link></h1>
<h2><router-link to="/p1_page2">点此进入下一个页面(方法1)</router-link></h2>
<h2><a href="#/p1_page2">点此进入下一个页面(方法2)</a></h2>

<h2><router-link :to="{path: '/p1_page2',query: {myname: 'laisc'}}">带参数进入下一个页面(方法1)</router-link></h2>
<h2><span @click="link">带参数进入下一个页面(通过js代码)</span></h2>

</div>
</template>

<script>
export default {
name: "P1_Main",
props: [],
data() {
return {
"name": "aaa"
}
},
methods: {
link() {
this.$router.push({
path: "/p1_page2",
query: {
myname: 'admin'
}
});
}
},
mounted() {

}
}
</script>

<style>
</style>

在views文件夹里新建文件P1_Page2.vue,写入以下内容:

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
<template>
<div id="P1_Page2">

<div>传入的名字是:{{this.$route.query.myname}}</div>
</div>
</template>

<script>
export default {
name: "P1_Page2",
props: [],
data() {
return {
"name":"aaa"
}
},
methods: {

},
mounted() {

}
}
</script>

<style>
</style>

在Main1.js文件的上面添加这两行:

1
2
import P1_Main from "../views/P1_Main.vue"
import P1_Page2 from "../views/P1_Page2.vue"

在变量routes2中追加:

1
2
3
4
5
6
7
8
, {
path: '/p1_main',
component: P1_Main,
}, {
path: '/p1_page2',
component: P1_Page2,
props: true
}

弄完后,文件Main1.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
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

import MainView from "../MainView.vue"
import Menu from "../views/Menu.vue"

import P1_Main from "../views/P1_Main.vue"
import P1_Page2 from "../views/P1_Page2.vue"


const routes2 = [{
path: '/',
redirect: '/menu', //重定向
component: MainView,
}, {
path: '/menu',
component: Menu,
}, {
path: '/p1_main',
component: P1_Main,
}, {
path: '/p1_page2',
component: P1_Page2,
props: true
}]


const router = new VueRouter({
"routes": routes2
})
export default router;

好了,现在可以访问目录中的第一项了。

第四课

现在我们继续扩张这个项目。

找到views文件夹,在里面创建文件P2.vue,然后写入下面代码:

1
2
3
4
5
6
7
8
9
10
11
<template>
<div>
<router-view></router-view>
</div>
</template>

<script>
</script>

<style>
</style>

然后在views文件夹里创建目录page2。

在page2文件夹里创建文件P2_Menu.vue,然后写入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<div>
<h1>Vue示例目录2</h1>
<h2><router-link to="/menu">返回目录</router-link></h2>
<h2><router-link to="/p2/p1">点此进入第一个页面</router-link></h2>
</div>
</template>

<script>
</script>

<style>
</style>

继续在page2文件夹里创建文件P2_P1.vue,然后写入以下内容:

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
<template>
<div>
<h2><router-link to="/p2/menu">返回Vue示例目录2</router-link></h2>
<button @click="clickme1">点我1</button>
<button @click="add">点我2 - {{myNumber1}}</button>
<br />
<input v-model="myInputData" />输入的内容:{{myInputData}}
<br />
<span @click="changeColor" :class="bgColor=='redbg'?'redbg':'greenbg'">123456{{bgColor}}</span>

<ul>
<li v-for="(user, index) in jsonData1" :key="index">
{{ index + 1 }} - id={{ user.id }}, username={{ user.username }}, password={{ user.password }}
</li>
</ul>
</div>
</template>

<script>
export default {
name: "P2_P1",
props: [],
data() {
return {
name: "aaa",
myNumber1: 0,
myInputData: "",
bgColor: "redbg",
jsonData1: [{
"id": 1199,
"username": "admin123",
"password": "admin456"
},
{
"id": 2244,
"username": "laisc",
"password": "abcd"
}
]
}
},
methods: {
clickme1() {
alert("我被点击了!")
},
add() {
this.myNumber1++;
},
changeColor() {
if (this.bgColor == "redbg") {
this.bgColor = "greenbg";
} else {
this.bgColor = "redbg";
}
}
},
mounted() {

}
}
</script>

<style>
.redbg {
background-color: red;
}

.greenbg {
background-color: green;
}
</style>

现在,打开Main1.js文件,在上面输入以下内容:

1
2
3
import P2 from "../views/P2.vue"
import P2_Menu from "../views/page2/P2_Menu.vue"
import P2_P1 from "../views/page2/P2_P1.vue"

在变量routes2中追加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
,
{
path: '/p2',
redirect: '/p2/menu',
component: P2,
children: [{
path: 'menu',
component: P2_Menu,
props: true
}, {
path: 'p1',
component: P2_P1,
props: true
}]
}

最后文件Main1.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
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

import MainView from "../MainView.vue"
import Menu from "../views/Menu.vue"

import P1_Main from "../views/P1_Main.vue"
import P1_Page2 from "../views/P1_Page2.vue"

import P2 from "../views/P2.vue"
import P2_Menu from "../views/page2/P2_Menu.vue"
import P2_P1 from "../views/page2/P2_P1.vue"


const routes2 = [{
path: '/',
redirect: '/menu', //重定向
component: MainView,
}, {
path: '/menu',
component: Menu,
}, {
path: '/p1_main',
component: P1_Main,
}, {
path: '/p1_page2',
component: P1_Page2,
props: true
},
{
path: '/p2',
redirect: '/p2/menu',
component: P2,
children: [{
path: 'menu',
component: P2_Menu,
props: true
}, {
path: 'p1',
component: P2_P1,
props: true
}]
}
]


const router = new VueRouter({
"routes": routes2
})
export default router;

现在目录的第二行也可以访问了。

第五课

现在要安装饿了么UI,在终端里运行npm install -S element-ui@2.9.2

然后继续。

打开main.js文件,在上面添加两行:

1
2
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

在中间添加一行:

1
Vue.use(ElementUI);

最后文件长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import App from './MainView.vue'

import router2 from './router/Main1.js'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false //一般在生产环境下设置为false值,可以减少控制台输出

Vue.use(ElementUI);

new Vue({
render: h => h(App),
router:router2,
}).$mount('#app')

在views文件夹里创建文件P3.vue,并写入以下内容:

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
74
<template>
<div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="p3_1">页面3_1</el-menu-item>
<el-submenu index="p3_more">
<template slot="title">更多页面</template>
<el-menu-item index="p3_2">页面3_2</el-menu-item>
<el-menu-item index="p3_3">页面3_3</el-menu-item>
</el-submenu>
</el-menu>
<router-view></router-view>
</div>
</template>

<script>
export default {
name: "edit",
props: [],
data() {
return {
activeIndex: '1'
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
if (key == "p3_1") {
this.$router.push({
path: "/p3/p1",
query: {

}
});
}else if (key == "p3_2") {
this.$router.push({
path: "/p3/p2",
query: {

}
});
}
else if (key == "p3_3") {
this.$router.push({
path: "/p3/p3",
query: {

}
});
}
}
},
mounted() {


}
}
</script>

<style>
</style>

在views文件夹里创建目录page3

里面创建三个文件:

P3_P1.vue

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
<template>
<div>
123
<h2><router-link to="/menu">点此进入目录</router-link></h2>
</div>

</template>

<script>
export default {
name: "edit",
props: [],
data() {
return {
ddd:"qwer"

}
},
methods: {

},
mounted() {


}
}
</script>

<style>
</style>

P3_P2.vue

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
<template>
<div>
12345
<el-button type="primary" @click="data2++;">点我吧{{data2}}</el-button>
<el-button type="danger" @click="minusData3">点我吧{{data3}}</el-button>
<br/>
<input v-model="text123" />{{text123}}
</div>

</template>

<script>
export default {
name: "edit",
props: [],
data() {
return {
data1: "qwer",
data2: 0,
data3: 100,
text123:"随便输入点什么东西"


}
},
methods: {
minusData3() {
this.data3--;
}

},
mounted() {


}
}
</script>

<style>
</style>

P3_P3.vue

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
<template>

<table border="" cellspacing="" cellpadding="">
<tr>
<th>id</th>
<th>name</th>
<th>price</th>

</tr>
<tr v-for="item in mylist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><el-button type="primary">加购物车</el-button>
<el-button type="success" class="myedit" id="myedit">修改</el-button>
<el-button type="danger" class="mydel" id="mydel" @click="del(item.id)">删除</el-button>
</td>
</tr>
</table>
</template>

<script>
export default {
name: "edit",
props: [],
data() {
return {
mylist: [{
id: 1,
name: "aa",
price: 100.00
},
{
id: 2,
name: "cc",
price: 200.00
},
{
id: 3,
name: "dd",
price: 300.00
}
],
}

},
methods: {
del(id) {
console.log(this.mylist);
var newList = [];

for (let i = 0; i < this.mylist.length; i++) {
if (this.mylist[i].id != id) {
newList.push(this.mylist[i]);
}
}
this.mylist = newList

console.log(this.mylist);
}


},
mounted() {


}
}
</script>

<style>
</style>

然后,打开Main1.js文件,在上面输入以下内容:

1
2
3
4
import P3 from "../views/P3.vue"
import P3_P1 from "../views/page3/P3_P1.vue"
import P3_P2 from "../views/page3/P3_P2.vue"
import P3_P3 from "../views/page3/P3_P3.vue"

在变量routes2中追加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
, {
path: '/p3',
component: P3,
children: [{
path: 'p1',
component: P3_P1,
props: true
}, {
path: 'p2',
component: P3_P2,
props: true
}, {
path: 'p3',
component: P3_P3,
props: true
}]
}

最后Main1.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
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

import MainView from "../MainView.vue"
import Menu from "../views/Menu.vue"

import P1_Main from "../views/P1_Main.vue"
import P1_Page2 from "../views/P1_Page2.vue"

import P2 from "../views/P2.vue"
import P2_Menu from "../views/page2/P2_Menu.vue"
import P2_P1 from "../views/page2/P2_P1.vue"

import P3 from "../views/P3.vue"
import P3_P1 from "../views/page3/P3_P1.vue"
import P3_P2 from "../views/page3/P3_P2.vue"
import P3_P3 from "../views/page3/P3_P3.vue"

const routes2 = [{
path: '/',
redirect: '/menu', //重定向
component: MainView,
}, {
path: '/menu',
component: Menu,
}, {
path: '/p1_main',
component: P1_Main,
}, {
path: '/p1_page2',
component: P1_Page2,
props: true
},
{
path: '/p2',
redirect: '/p2/menu',
component: P2,
children: [{
path: 'menu',
component: P2_Menu,
props: true
}, {
path: 'p1',
component: P2_P1,
props: true
}]
},
{
path: '/p3',
component: P3,
children: [{
path: 'p1',
component: P3_P1,
props: true
}, {
path: 'p2',
component: P3_P2,
props: true
}, {
path: 'p3',
component: P3_P3,
props: true
}]
}
]


const router = new VueRouter({
"routes": routes2
})
export default router;

现在,打开浏览器,你会看到目录的第三项也可以访问了。

第六课

现在我们要安装Axios了。

在终端中输入命令:npm install -S axios@0.26.0

然后,修改main.js文件。

在文件中加入下面几行:

1
2
3
4
5
import axios from 'axios'
Vue.prototype.$axios = axios;

axios.defaults.withCredentials = true; //允许跨域
axios.defaults.baseURL = "http://localhost:8001/"; //设置默认的基础 URL

弄好后文件长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from 'vue'
import App from './MainView.vue'

import router2 from './router/Main1.js'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'
Vue.prototype.$axios = axios;

axios.defaults.withCredentials = true; //允许跨域
axios.defaults.baseURL = "http://localhost:8001/"; //设置默认的基础 URL

Vue.config.productionTip = false //一般在生产环境下设置为false值,可以减少控制台输出

Vue.use(ElementUI);

new Vue({
render: h => h(App),
router: router2,
}).$mount('#app')

找到views目录,在里面添加文件:P4.vue

然后在文件中写入:

1
2
3
4
5
6
7
8
9
<template>
<div><router-view></router-view></div>
</template>

<script>
</script>

<style>
</style>

在views目录中新建文件夹page4,并在page4文件夹里写入两个文件:

P4_Menu.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<div>
<h1>Axios示例目录</h1>
<h2><router-link to="/menu">返回目录</router-link></h2>
<h2><router-link to="/p4/p1">点此进入第一个页面</router-link></h2>
</div>
</template>

<script>
</script>

<style>
</style>

P4_P1.vue

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<div>
<h2><router-link to="/p4/menu">返回Axios示例目录</router-link></h2>
<button @click="get1">不带参数GET</button>
{{getData1}}
<br />
<button @click="get2">带参数GET</button>
<button @click="post1">带参数POST</button>
{{data1}}
<br />
<button @click="postJson">带JSON的POST</button>
<button @click="postJson2">带多个JSON的POST</button>
{{data2}}
<br />
<button @click="returnjson">返回JSON</button>
<ul>
<li v-for="(user, index) in returnjsondata" :key="index">
{{ index + 1 }} - id={{ user.id }}, username={{ user.username }}, password={{ user.password }}
</li>
</ul>

</div>
</template>

<script>
export default {
name: "P4_P1",
props: [],
data() {
return {
"getData1": "默认getData1数据",
"data1": "默认data1数据",
"data2": "默认json数据",
"returnjsondata": ""
}
},
methods: {
get1() { //GET提交
var that = this;
this.$axios.get("/test/hello", {}, {}).then(
function(resp) {
that.getData1 = resp.data;
})
},

get2() { //GET带参数提交
var that = this;
this.$axios.get("/test/test2", {
params: {
mydata1: "通过Get提交",
a2: "ccc"
}
}, {}).then(function(resp) {
that.data1 = resp.data;
}).catch(function(error) {
console.error("Error:", error);
});
},

post1() { //以表单数据编码方式提交POST
var that = this;
this.$axios.post("/test/test2", new URLSearchParams({
mydata1: "通过Post提交",
a2: "ccc"
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded' //以 URL 编码的表单形式传输
}

}).then(function(resp) {
that.data1 = resp.data;
});
},

postJson() { //以JSON格式数据用POST提交
var that = this;
this.$axios.post("/test/jsontest", {
id: 111,
username: "通过Post提交",
password: "ccc"
}, {
headers: {
'Content-Type': 'application/json'
}

}).then(function(resp) {
that.data2 = resp.data;
});
},


postJson2() { //以JSON数组格式数据用POST提交
var that = this;
this.$axios.post("/test/morejsontest", [{
id: 111,
username: "通过Post提交1",
password: "ccc"
}, {
id: 222,
username: "通过Post提交2",
password: "ddd"
}], {
headers: {
'Content-Type': 'application/json'
}

}).then(function(resp) {
that.data2 = resp.data;
});
},
returnjson() { //获得JSON数据
var that = this;
this.$axios.get("/test/returnjson", {}, {}).then(
function(resp) {
that.returnjsondata = resp.data;
})
}

},
mounted() {

}
}
</script>

<style>
</style>

现在,打开Main1.js,添加这三行代码:

1
2
3
import P4 from "../views/P4.vue"
import P4_Menu from "../views/page4/P4_Menu.vue"
import P4_P1 from "../views/page4/P4_P1.vue"

然后在变量routes2中追加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
, {
path: '/p4',
redirect: '/p4/menu',
component: P4,
children: [{
path: 'menu',
component: P4_Menu,
props: true
}, {
path: 'p1',
component: P4_P1,
props: true
}]
}

最后文件长这样:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

import MainView from "../MainView.vue"
import Menu from "../views/Menu.vue"

import P1_Main from "../views/P1_Main.vue"
import P1_Page2 from "../views/P1_Page2.vue"

import P2 from "../views/P2.vue"
import P2_Menu from "../views/page2/P2_Menu.vue"
import P2_P1 from "../views/page2/P2_P1.vue"

import P3 from "../views/P3.vue"
import P3_P1 from "../views/page3/P3_P1.vue"
import P3_P2 from "../views/page3/P3_P2.vue"
import P3_P3 from "../views/page3/P3_P3.vue"

import P4 from "../views/P4.vue"
import P4_Menu from "../views/page4/P4_Menu.vue"
import P4_P1 from "../views/page4/P4_P1.vue"

const routes2 = [{
path: '/',
redirect: '/menu', //重定向
component: MainView,
}, {
path: '/menu',
component: Menu,
}, {
path: '/p1_main',
component: P1_Main,
}, {
path: '/p1_page2',
component: P1_Page2,
props: true
},
{
path: '/p2',
redirect: '/p2/menu',
component: P2,
children: [{
path: 'menu',
component: P2_Menu,
props: true
}, {
path: 'p1',
component: P2_P1,
props: true
}]
},
{
path: '/p3',
component: P3,
children: [{
path: 'p1',
component: P3_P1,
props: true
}, {
path: 'p2',
component: P3_P2,
props: true
}, {
path: 'p3',
component: P3_P3,
props: true
}]
},
{
path: '/p4',
redirect: '/p4/menu',
component: P4,
children: [{
path: 'menu',
component: P4_Menu,
props: true
}, {
path: 'p1',
component: P4_P1,
props: true
}]
}
]


const router = new VueRouter({
"routes": routes2
})
export default router;

现在所有事情都做完了,我们可以访问目录的最后一项了,好了,教程到此结束。

如果需要工程文件的,请发邮件获取:laisc7301@gmail.com