📇 初始化路由页面
This commit is contained in:
parent
b397e00b36
commit
39b773f409
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "3",
|
||||
"vuex": "3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@ importers:
|
|||
vue:
|
||||
specifier: ^2.6.14
|
||||
version: 2.7.16
|
||||
vue-router:
|
||||
specifier: '3'
|
||||
version: 3.6.5(vue@2.7.16)
|
||||
vuex:
|
||||
specifier: '3'
|
||||
version: 3.6.2(vue@2.7.16)
|
||||
|
|
@ -3575,6 +3578,11 @@ packages:
|
|||
vue:
|
||||
optional: true
|
||||
|
||||
vue-router@3.6.5:
|
||||
resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
|
||||
peerDependencies:
|
||||
vue: ^2
|
||||
|
||||
vue-style-loader@4.1.3:
|
||||
resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
|
||||
|
||||
|
|
@ -7700,6 +7708,10 @@ snapshots:
|
|||
'@vue/compiler-sfc': 3.5.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:
|
||||
dependencies:
|
||||
hash-sum: 1.0.2
|
||||
|
|
|
|||
|
|
@ -1,15 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<hr />
|
||||
<Demo3 /> -->
|
||||
<!-- <Demo4 /> -->
|
||||
<Demo5 />
|
||||
<Demo6 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,11 +15,12 @@
|
|||
// import Demo2 from "@/views/demo2/index.vue";
|
||||
// import Demo3 from "@/views/demo3/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 {
|
||||
name: "App",
|
||||
// components: { Demo1, Demo2, Demo3 },
|
||||
components: { Demo5 },
|
||||
components: { Demo6 },
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
new Vue({
|
||||
render: (h) => h(App),
|
||||
store,
|
||||
router,
|
||||
}).$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