vue3

16.vue3/project2/src/router/index.js

@@ -12,15 +12,29 @@ const router = createRouter({
         {
             path: '/home',
             component: Home,
-            name: 'wode'
+            name: 'wode',
+            meta: { title: '首页' }
         },
         {
             path: '/my',
-            component: My
+            component: My,
+            meta: { title: '我的' },
+            beforeEnter: ((to, from) => {
+                const token = localStorage.getItem("token");
+                if (token) return true;
+                else return false
+            })
+        },
+        {
+            path: '/login',
+            name: "login",
+            meta: { title: '登录' },
+            component: () => import("../views/Login.vue")
         },
         {
             path: '/list',
             component: List,
+            // meta: { title: '列表' },
             redirect: '/list/demo1',
             children: [
                 {
@@ -37,5 +51,17 @@ const router = createRouter({
         },
     ]
 });
+// router.beforeEach((to, form, next) => {
+//     const whiteList = ['/home', '/login'];
+//     const token = localStorage.getItem("token");
+//     if (!token && !whiteList.includes(to.path)) {
+//         console.log("进来")
+//         next({ name: 'login' })
+//     } else next()
 
+// })
+// router.afterEach((to, form, next) => {
+//     console.log(to, 't')
+//     document.title = to.meta.title || 'vue3'
+// })
 export default router;

16.vue3/project2/src/views/Login.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>登录</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
+console.log(route);
+</script>
+
+<style lang="scss" scoped>
+</style>