Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 39b773f

Browse filesBrowse files
BunnyMasterBunnyMaster
committed
📇 初始化路由页面
1 parent b397e00 commit 39b773f
Copy full SHA for 39b773f

File tree

Expand file treeCollapse file tree

9 files changed

+124
-8
lines changed
Filter options
Expand file treeCollapse file tree

9 files changed

+124
-8
lines changed

‎vue2-tutorials/single-file/demo2/package.json

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/package.json
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"dependencies": {
1111
"core-js": "^3.8.3",
1212
"vue": "^2.6.14",
13+
"vue-router": "3",
1314
"vuex": "3"
1415
},
1516
"devDependencies": {

‎vue2-tutorials/single-file/demo2/pnpm-lock.yaml

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/pnpm-lock.yaml
+12Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vue2-tutorials/single-file/demo2/public/index.html

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/public/index.html
+25-5Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,35 @@
11
<!DOCTYPE html>
22
<html lang="">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
11+
crossorigin="anonymous"
12+
/>
13+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
14+
<script
15+
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
16+
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
17+
crossorigin="anonymous"
18+
></script>
19+
<script
20+
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
21+
integrity="sha384-7qAoOXltbVP82dhxHAUje59V5r2YsVfBafyUDxEdApLPmcdhBPg1DKg1ERo0BZlK"
22+
crossorigin="anonymous"
23+
></script>
824
<title><%= htmlWebpackPlugin.options.title %></title>
925
</head>
1026
<body>
1127
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
28+
<strong
29+
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
30+
properly without JavaScript enabled. Please enable it to
31+
continue.</strong
32+
>
1333
</noscript>
1434
<div id="app"></div>
1535
<!-- built files will be auto injected -->

‎vue2-tutorials/single-file/demo2/src/App.vue

Copy file name to clipboardExpand all lines: vue2-tutorials/single-file/demo2/src/App.vue
+4-3Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<hr />
77
<Demo3 /> -->
88
<!-- <Demo4 /> -->
9-
<Demo5 />
9+
<Demo6 />
1010
</div>
1111
</template>
1212

@@ -15,11 +15,12 @@
1515
// import Demo2 from "@/views/demo2/index.vue";
1616
// import Demo3 from "@/views/demo3/index.vue";
1717
// import Demo4 from "@/views/demo4/index.vue";
18-
import Demo5 from "@/views/demo5/index.vue";
18+
// import Demo5 from "@/views/demo5/index.vue";
19+
import Demo6 from "@/views/demo6/index.vue";
1920
2021
export default {
2122
name: "App",
2223
// components: { Demo1, Demo2, Demo3 },
23-
components: { Demo5 },
24+
components: { Demo6 },
2425
};
2526
</script>

‎vue2-tutorials/single-file/demo2/src/main.js

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import Vue from "vue";
2+
import VueRouter from "vue-router";
23
import App from "./App.vue";
4+
import router from "./router";
35
import store from "./store";
46

57
Vue.config.productionTip = false;
68

9+
Vue.use(VueRouter);
10+
711
new Vue({
812
render: (h) => h(App),
913
store,
14+
router,
1015
}).$mount("#app");

‎vue2-tutorials/single-file/demo2/src/router/index.js

Copy file name to clipboard
+16Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import VueRouter from "vue-router";
2+
3+
const router = new VueRouter({
4+
routes: [
5+
{
6+
path: "/about",
7+
component: () => import("@/views/demo6/components/About.vue"),
8+
},
9+
{
10+
path: "/home",
11+
component: () => import("@/views/demo6/components/Home.vue"),
12+
},
13+
],
14+
});
15+
16+
export default router;

‎vue2-tutorials/single-file/demo2/src/views/demo6/components/About.vue

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
<h2>About内容</h2>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "AboutPage",
10+
};
11+
</script>

‎vue2-tutorials/single-file/demo2/src/views/demo6/components/Home.vue

Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
<h3>Home内容</h3>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "HomePage",
10+
};
11+
</script>

‎vue2-tutorials/single-file/demo2/src/views/demo6/index.vue

Copy file name to clipboard
+39Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="container mt-3">
3+
<div class="row">
4+
<div class="col-sm-2 col-xs-offset-2 text-center">
5+
<!-- 路由跳转内容 -->
6+
<div class="list-group">
7+
<router-link
8+
class="list-group-item"
9+
active-class="active"
10+
to="/about"
11+
>
12+
about
13+
</router-link>
14+
<router-link class="list-group-item" active-class="active" to="/home"
15+
>home</router-link
16+
>
17+
</div>
18+
</div>
19+
20+
<!-- 内容显示区域 -->
21+
<div class="col-sm-6">
22+
<div class="panel">
23+
<div class="panel-body">
24+
<router-view />
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script>
33+
export default {
34+
name: "Demo-6",
35+
data() {
36+
return {};
37+
},
38+
};
39+
</script>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.