📇 初始化路由页面
This commit is contained in:
parent
b397e00b36
commit
39b773f409
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "3",
|
||||||
"vuex": "3"
|
"vuex": "3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,9 @@ importers:
|
||||||
vue:
|
vue:
|
||||||
specifier: ^2.6.14
|
specifier: ^2.6.14
|
||||||
version: 2.7.16
|
version: 2.7.16
|
||||||
|
vue-router:
|
||||||
|
specifier: '3'
|
||||||
|
version: 3.6.5(vue@2.7.16)
|
||||||
vuex:
|
vuex:
|
||||||
specifier: '3'
|
specifier: '3'
|
||||||
version: 3.6.2(vue@2.7.16)
|
version: 3.6.2(vue@2.7.16)
|
||||||
|
|
@ -3575,6 +3578,11 @@ packages:
|
||||||
vue:
|
vue:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
vue-router@3.6.5:
|
||||||
|
resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
|
||||||
|
peerDependencies:
|
||||||
|
vue: ^2
|
||||||
|
|
||||||
vue-style-loader@4.1.3:
|
vue-style-loader@4.1.3:
|
||||||
resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
|
resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
|
||||||
|
|
||||||
|
|
@ -7700,6 +7708,10 @@ snapshots:
|
||||||
'@vue/compiler-sfc': 3.5.16
|
'@vue/compiler-sfc': 3.5.16
|
||||||
vue: 2.7.16
|
vue: 2.7.16
|
||||||
|
|
||||||
|
vue-router@3.6.5(vue@2.7.16):
|
||||||
|
dependencies:
|
||||||
|
vue: 2.7.16
|
||||||
|
|
||||||
vue-style-loader@4.1.3:
|
vue-style-loader@4.1.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
hash-sum: 1.0.2
|
hash-sum: 1.0.2
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,35 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||||
|
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-7qAoOXltbVP82dhxHAUje59V5r2YsVfBafyUDxEdApLPmcdhBPg1DKg1ERo0BZlK"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong
|
||||||
|
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
|
||||||
|
properly without JavaScript enabled. Please enable it to
|
||||||
|
continue.</strong
|
||||||
|
>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<hr />
|
<hr />
|
||||||
<Demo3 /> -->
|
<Demo3 /> -->
|
||||||
<!-- <Demo4 /> -->
|
<!-- <Demo4 /> -->
|
||||||
<Demo5 />
|
<Demo6 />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -15,11 +15,12 @@
|
||||||
// import Demo2 from "@/views/demo2/index.vue";
|
// import Demo2 from "@/views/demo2/index.vue";
|
||||||
// import Demo3 from "@/views/demo3/index.vue";
|
// import Demo3 from "@/views/demo3/index.vue";
|
||||||
// import Demo4 from "@/views/demo4/index.vue";
|
// import Demo4 from "@/views/demo4/index.vue";
|
||||||
import Demo5 from "@/views/demo5/index.vue";
|
// import Demo5 from "@/views/demo5/index.vue";
|
||||||
|
import Demo6 from "@/views/demo6/index.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
// components: { Demo1, Demo2, Demo3 },
|
// components: { Demo1, Demo2, Demo3 },
|
||||||
components: { Demo5 },
|
components: { Demo6 },
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,15 @@
|
||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
|
import VueRouter from "vue-router";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
render: (h) => h(App),
|
render: (h) => h(App),
|
||||||
store,
|
store,
|
||||||
|
router,
|
||||||
}).$mount("#app");
|
}).$mount("#app");
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import VueRouter from "vue-router";
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: "/about",
|
||||||
|
component: () => import("@/views/demo6/components/About.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/home",
|
||||||
|
component: () => import("@/views/demo6/components/Home.vue"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h2>About内容</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AboutPage",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h3>Home内容</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "HomePage",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<div class="container mt-3">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-2 col-xs-offset-2 text-center">
|
||||||
|
<!-- 路由跳转内容 -->
|
||||||
|
<div class="list-group">
|
||||||
|
<router-link
|
||||||
|
class="list-group-item"
|
||||||
|
active-class="active"
|
||||||
|
to="/about"
|
||||||
|
>
|
||||||
|
about
|
||||||
|
</router-link>
|
||||||
|
<router-link class="list-group-item" active-class="active" to="/home"
|
||||||
|
>home</router-link
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 内容显示区域 -->
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-body">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Demo-6",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue