first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/font-end-nine/每天上课/2022-07-09/router.html
+++ b/历届学生/font-end-nine/每天上课/2022-07-09/router.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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">
+    <title>vue-router 路由管理</title>
+    <style>
+        /* 可以设置不同的进入和离开动画 */
+        /* 设置持续时间和动画函数 */
+        .slide-fade-enter-active {
+        transition: all .3s ease;
+        }
+        .slide-fade-leave-active {
+        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+        }
+        .slide-fade-enter, .slide-fade-leave-to
+        /* .slide-fade-leave-active for below version 2.1.8 */ {
+        transform: translateX(10px);
+        opacity: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+
+
+        <h1>Hello App!</h1>
+
+        <p>
+            <router-link to="/">首页</router-link>
+            <router-link to="/bar">Go to Bar</router-link>
+        </p>
+
+        <transition name="slide-fade">
+          <router-view></router-view>
+        </transition>
+
+    </div>
+</body>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
+<script>
+    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
+
+    // TODO 嵌套路由 在管理后台的项目里面讲解
+
+
+    // 1. 定义 (路由) 组件。
+    // 可以从其他文件 import 进来
+    const Index = {
+        data() {
+            return {
+                list: [
+                    { id: 1, title: '新闻1' },
+                    { id: 2, title: '新闻2' },
+                    { id: 3, title: '新闻3' },
+                    { id: 4, title: '新闻4' },
+                ]
+            }
+        },
+        template: `
+          <div class="index">
+            首页
+            <ul>
+              <li @click="enterInfo(item)"  v-for="item,index in list" :key="index">{{ item.title }}</li>    
+            </ul>
+          </div>
+        `,
+        methods: {
+            enterInfo(item) {
+                this.$router.push({
+                    name: 'info',
+                    query: {
+                        id: item.id,
+                        page: 1
+                    }
+                })
+            }
+        }
+    }
+    const Bar = { template: '<div>bar</div>' }
+    const info = {
+        template: `
+          <div>详情页面 {{ $route.query.id }}</div>
+        `,
+        data() {
+            return {
+                // id: 0
+            }
+        },
+        created() {
+            // this.id = this.$route.query.id
+            console.log(this.$route.query.id);
+        },
+        methods: {
+
+        }
+    }
+
+    const login = {
+        template: `
+          <div @click="login">登录页面</div>
+        `,
+        data() {
+            return {
+                // id: 0
+            }
+        },
+        methods: {
+            login() {
+                //
+                localStorage.setItem("token", "11111")
+                if(this.$route.query.hasOwnProperty("to")) {
+                    this.$router.push({
+                        path: this.$route.query.to
+                    })
+                } else {
+                    this.$router.push("/")
+                }
+                
+            }
+        }
+    }
+
+
+    // 2. 定义路由
+    // 每个路由应该映射一个组件。 其中"component" 可以是
+    // 通过 Vue.extend() 创建的组件构造器，
+    // 或者，只是一个组件配置对象。
+    // 我们晚点再讨论嵌套路由。
+    const routes = [
+        {
+            path: '/',
+            redirect: '/index',
+            meta: {
+                isLogin: false
+            }
+        },
+        {
+            name: 'index',
+            path: '/index',
+            component: Index,
+            meta: {
+                isLogin: false
+            }
+        },
+        {
+            name: 'bar',
+            path: '/bar',
+            component: Bar,
+            meta: {
+                isLogin: false
+            }
+        },
+        {
+            name: 'info',
+            path: '/info',
+            component: info,
+            meta: {
+                isLogin: true
+            }
+        },
+        {
+            name: 'login',
+            path: '/login',
+            component: login,
+            meta: {
+                isLogin: false
+            }
+        },
+    ]
+
+    // 3. 创建 router 实例，然后传 `routes` 配置
+    // 你还可以传别的配置参数, 不过先这么简单着吧。
+    const router = new VueRouter({
+        mode: 'hash',
+        routes // (缩写) 相当于 routes: routes
+    })
+
+
+    router.beforeEach((to, from, next) => {
+        console.log(to);
+        // 你访问的页面需要登录
+        if (to.meta.isLogin) {
+            // 未登录
+            if (localStorage.getItem("token") == null ) {
+                next({
+                    name: 'login',
+                    query: {
+                        to: to.fullPath
+                    }
+                })
+            } else {
+                next()
+            }
+        } else {
+            next()
+        }
+    })
+
+    // 4. 创建和挂载根实例。
+    // 记得要通过 router 配置参数注入路由，
+    // 从而让整个应用都有路由功能
+    const app = new Vue({
+        el: '#app',
+        router
+    })
+
+
+    // 两种 路由模式
+    //   TODO 路由模式的原理（面试）
+    //   hash
+    //   http://www.a.com/#/about?id=1
+
+    //   history
+    //   http://www.a.com/about
+
+    // vue-router  两种页面跳转方式
+    //  router-link
+    //  使用js来跳转
+
+    // 传参方式：
+    //  query
+    //   http://www.a.com?id=1&page=2
+    //  params
+    //   http://www.a.com/1/2
+
+    // this.$route 用来获取路由信息的（地址，参数这些信息）
+    // this.$router 用来获取路由跳转方法的
+
+
+    // 导航守卫   就是拦路虎
+    //  一般 实现 登录拦截，权限拦截等功能..
+    //  全局导航守卫
+    //  路由配置中的 导航守卫
+    //  组件内部的 导航守卫
+</script>
+
+</html>