first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-11/每天上课/2023-06-15/router.html
+++ b/历届学生/front-end-team-11/每天上课/2023-06-15/router.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .active {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+  
+    <div id="app">
+        <router-view></router-view>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
+<script>
+    const Index = {
+        data() {
+            return {
+                list: [
+                    { id: 1, title: '新闻1' },
+                    { id: 2, title: '新闻2' },
+                    { id: 3, title: '新闻3' },
+                ]
+            }
+        },
+        template: `<div class="index">
+                        <ul>
+                            <router-link tag="li" :to="{ name: 'info', query: { id: item.id } }" v-for="item,index in list" :key="index">
+                              {{ item.title }}
+                            </router-link>
+                        </ul>
+                    </div>`,
+        methods: {
+            goInfo(id) {
+                this.$router.push({
+                    name: 'info',
+                    params: {
+                        // id: id,
+                        id
+                    }
+                })
+            }
+        }            
+    }
+    const Info = { 
+        template: `<div class="info">详情</div>` ,
+        created() {
+            console.log(this.$route.query.id);
+        },
+    }
+
+    const Car = { 
+        template: `<div class="info">购物车</div>` ,
+        created() {
+            
+        },
+    }
+
+    const Login = { 
+        template: `<div class="info">
+            登录页面
+            <button @click="login">登录</button>
+            </div>` ,
+        created() {
+            
+        },
+        methods: {
+            login() {
+                localStorage.setItem("token", "effdasfgfdasgfnbfddg")
+                if (this.$route.query.from) {
+                    this.$router.push(this.$route.query.from)
+                } else {
+                    this.$router.push("/")
+                }
+            }
+        }
+    }
+
+    const Error = { 
+        template: `<div class="error">404 页面不存在</div>` ,
+        created() {
+            
+        },
+    }
+
+    const Layout = { 
+        template: `<div class="Layout">
+                        <h1>Hello App!</h1>
+                        <p>
+                            <router-link to="/">Go to Foo</router-link>
+                            <router-link to="/info">Go to Bar</router-link>
+                        </p>
+                        <router-view></router-view>
+                    </div>` ,
+        created() {
+            
+        },
+    }
+
+    const routes = [
+        {   path: '*', component: Error},
+        { 
+            path: '/', 
+            name: 'layout', 
+            component: Layout,
+            children: [
+                { path: 'login', name: 'login', component: Login, meta: { requiresAuth: false, title: '登录' } },
+                { path: 'car', name: 'car', component: Car, meta: { requiresAuth: true, title: '购物车' } },
+                { path: '/', name: 'index', component: Index, meta: { requiresAuth: false, title: '首页' } },
+                { path: 'info', name: 'info', component: Info, meta: { requiresAuth: false, title: '详情' }  }
+            ]
+        }
+    ]
+
+    const router = new VueRouter({
+        linkExactActiveClass: "active",
+        routes
+    })
+
+    // 登录状态检查
+    router.beforeEach((to, from, next) => {
+        document.title = to.meta.title;
+        // 未登录
+        if (localStorage.getItem("token") == null) {
+            // 你访问的页面还需要登录
+            if (to.meta.requiresAuth) {
+                next({
+                    name: 'login',
+                    query: {
+                        from: to.fullPath
+                    }
+                })
+            } else {
+                next()
+            }
+        } else {
+            next()
+        }
+    })
+
+    const app = new Vue({
+        el: "#app",
+        router
+    })
+
+ 
+
+    // 对比原生js，为什么需要 vue-router 这样的插件来实现页面跳转
+    //  
+
+</script>
+</html>