|
|
@@ -1,86 +1,51 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-
|
|
|
-<head>
|
|
|
+<html>
|
|
|
+
|
|
|
+ <head>
|
|
|
<meta charset="utf-8" />
|
|
|
- <meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
|
- <meta title="description" content="" />
|
|
|
- <meta name="keywords" content="" />
|
|
|
- <meta title="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
|
- <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
|
|
|
- <link rel="icon" href="../assets/img/favicon.ico">
|
|
|
-
|
|
|
- <title>测试</title>
|
|
|
-
|
|
|
- <!--====== bootstrap css ====== -->
|
|
|
- <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
|
|
|
- <!--====== element css ====== -->
|
|
|
- <link rel="stylesheet" href="../assets/css/element.css">
|
|
|
- <!--====== Mean Menu ======-->
|
|
|
- <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
|
|
|
- <!--====== Default css ======-->
|
|
|
- <link rel="stylesheet" href="../assets/css/default.css" />
|
|
|
- <!--====== Animation css =======-->
|
|
|
- <link rel="stylesheet" href="../assets/css/animation.css" />
|
|
|
- <!--====== Style css ======-->
|
|
|
- <link rel="stylesheet" href="../assets/css/style.css" />
|
|
|
-
|
|
|
-
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <!--[if lte IE 9]>
|
|
|
- <p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
|
|
|
- <![endif]-->
|
|
|
+ <title>快速入门</title>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
|
+ <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
<div id="app">
|
|
|
-
|
|
|
- <div :style="{'display': columnList.length>0?'block':'none'}" style="display:none">s</div>
|
|
|
-
|
|
|
- <header-com @data-event="goApply" :todo="columnList" :currentone="currentPath"></header-com>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <footer-com v-if="columnList.length>1" :todo="columnList"></footer-com>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ <div class="sidebar">
|
|
|
+ <router-link to="/menu1">首页</router-link>
|
|
|
+ <router-link to="/menu2">关于我们</router-link>
|
|
|
+ <router-link to="/menu3">新闻动态</router-link>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <router-view></router-view>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!--====== jquery js ======-->
|
|
|
- <script src="../assets/js/vendor/jquery-1.12.4.min.js "></script>
|
|
|
- <!--====== Bootstrap js ======-->
|
|
|
- <script src="../assets/js/bootstrap.min.js "></script>
|
|
|
- <!--====== Vue js ======-->
|
|
|
- <script src="../assets/js/vue.min.js "></script>
|
|
|
- <!--====== Element js ======-->
|
|
|
- <script src="../assets/js/element/index.js"></script>
|
|
|
- <!--====== Mean Menu ======-->
|
|
|
- <script src="../assets/js/jquery.meanmenu.min.js "></script>
|
|
|
-
|
|
|
- <!--====== Setting Info js ======-->
|
|
|
- <script src="../assets/js/settinginfo.js"></script>
|
|
|
- <!--====== Main js ======-->
|
|
|
- <script src="../assets/js/main.js "></script>
|
|
|
- <!--====== commonVue js ======-->
|
|
|
- <script type="module" src="../assets/js/commonVue.js "></script>
|
|
|
- <script>
|
|
|
- // var columnList=1
|
|
|
- </script>
|
|
|
-
|
|
|
+ </body>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 定义组件
|
|
|
+ const Menu1 = {
|
|
|
+ template: '<div>首页的内容：<p>{{ customContent }}</p></div>',
|
|
|
+ data () {
|
|
|
+ return { customContent: "这是首页的自定义内容" }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const Menu2 = { template: '<div>关于我们的内容：<p>{{ customContent }}</p></div>', data () { return { customContent: "这是关于我们的自定义内容" } } };
|
|
|
+ const Menu3 = { template: '<div>新闻动态的内容：<p>{{ customContent }}</p></div>', data () { return { customContent: "这是新闻动态的自定义内容" } } };
|
|
|
+
|
|
|
+ // 创建路由实例
|
|
|
+ const router = new VueRouter({
|
|
|
+ routes: [
|
|
|
+ { path: '/menu1', component: Menu1 },
|
|
|
+ { path: '/menu2', component: Menu2 },
|
|
|
+ { path: '/menu3', component: Menu3 }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建Vue实例，并将路由实例注入
|
|
|
+ new Vue({
|
|
|
+ el: "#app",
|
|
|
+ router
|
|
|
+ });
|
|
|
+ </script>
|
|
|
|
|
|
-
|
|
|
-</body>
|
|
|
-
|
|
|
</html>
|
ming
