vue3-router学习初始化项目

.eslintrc.js

+/*
+ * @Author: your name
+ * @Date: 2021-01-07 08:52:05
+ * @LastEditTime: 2021-11-03 08:42:10
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\.eslintrc.js
+ */
 module.exports = {
   root: true,
   env: {
@@ -13,6 +21,9 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-trailing-space': ['error', {
+      'skipBlinkLines': true
+    }]
   }
-}
+}
\ No newline at end of file

package.json

 {
-  "name": "vue-demo",
+  "name": "vue3-run-time",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/App.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-01-07 08:52:05
+ * @LastEditTime: 2021-11-02 14:52:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\App.vue
+-->
 <template>
   <div id="nav">
     <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <router-link to="/about">About</router-link>|
+    <router-link to="/foo">Go to Foo </router-link>|
+    <router-link to="https://www.baidu.com">跳转外链</router-link>|
+    <router-link :to="{ path: '/auto/2222/profile' }">动态路由</router-link>|
+    <router-link to="/user/111">props跳转路由</router-link>
+
+    <!--  为什么要使用router-link，router-view是自定义指令 -->
+  </div>
+  <div class="main-contains">
+    <!-- router-view是路由出口，匹配到路由组件将渲染在这里 -->
+    <router-view name="leftSilder" class="view left-slider"></router-view>
+
+    <router-view name="default" class="view default center"></router-view>
+
+    <router-view name="rightSilder" class="view right-slider"></router-view>
   </div>
-  <router-view/>
 </template>
 
 <style lang="scss">
+body {
+  padding: 0;
+  margin: 0;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  padding: 0;
+  margin: 0;
 }
 
 #nav {
@@ -27,4 +54,24 @@
     }
   }
 }
+.main-contains {
+  display: flex;
+  box-sizing: border-box;
+  .view {
+    &.default {
+      &.center {
+        width: 70%;
+        box-sizing: border-box;
+      }
+    }
+    &.left-slider {
+      width: 15%;
+      box-sizing: border-box;
+    }
+    &.right-slider {
+      width: 15%;
+      box-sizing: border-box;
+    }
+  }
+}
 </style>

src/access/auth.ts

+/*
+ * @Author: your name
+ * @Date: 2021-11-02 15:05:10
+ * @LastEditTime: 2021-11-02 15:51:19
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\access\auth.js
+ */
+function canUserAccess(firstName = "ni", lastName = "牛逼") {
+   
+    return firstName + lastName;
+}
+
+export default {
+    canUserAccess: canUserAccess,
+    
+}
\ No newline at end of file

src/components/HelloWorld.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-01-07 08:52:05
+ * @LastEditTime: 2021-11-02 08:48:14
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\components\HelloWorld.vue
+-->
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Options, Vue } from "vue-class-component";
 
 @Options({
   props: {
@@ -42,7 +21,7 @@ import { Options, Vue } from 'vue-class-component';
   }
 })
 export default class HelloWorld extends Vue {
-  msg!: string
+  msg!: string;
 }
 </script>
 

src/main.ts

+/*
+ * @Author: your name
+ * @Date: 2021-07-02 18:02:41
+ * @LastEditTime: 2021-11-02 15:53:06
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\main.ts
+ */
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+import access from './access/auth'
+const aa = new Object({
+    500: '500',
+    400:'400'
+});
+/* router.beforeEach(async function(to, from,next) {
+    const  me = await access.canUserAccess();
+    if (to.name != 'login' && !me) {
+        next('login')
+    } else {
+        next();
+     }
+})
+ */
+console.log(aa);
+router.beforeResolve(async to => {
+    console.log(to.matched);
+    if (to.meta.requiresCamera) {
+        try {
+             await access.canUserAccess();
+        } catch (error) {
+             await access.canUserAccess();
+             throw error;
+        }
+    }
+})
 createApp(App).use(store).use(router).mount('#app')

src/router/index.ts

+/*
+ * @Author: your name
+ * @Date: 2021-01-07 08:52:05
+ * @LastEditTime: 2021-11-03 09:05:17
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\router\index.ts
+ */
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/Home.vue'
-
+import Foo from '../views/Foo.vue'
+import Auto from '../views/Auto.vue'
+import UserProfile from '../views/UserProfile.vue'
+import User from '../views/User.vue'
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    alias: ['/home', '/Home'],
+    meta: {
+      requiresCamera:'home'
+    }
   },
   {
-    path: '/about',
+    path: '/about/:plain?/:id?',
     name: 'About',
+     meta: {
+      requiresCamera:'about'
+    },
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+  {
+    path: '/foo',
+    name: 'Foo',
+    components: {
+      default:  Home,
+      'rightSilder': Foo,
+      'leftSilder':UserProfile
+    },
+    //组件独享路由-只在路由进入时候触发
+    beforeEnter: (to, from, next) => {
+      console.log(to);
+      console.log(from);
+      // next()
+      return 
+    },
+    /* beforeRouteUpdate(to, from,next) {
+        console.log(to);
+        console.log(from);
+        // 在当前路由改变，但是该组件被复用时调用
+        // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
+        // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
+        // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this` 
+    }, */
+   /*  beforeRouteLeave(to, from):any {
+       //console.log(to);
+       //console.log(from);
+       // 在导航离开渲染该组件的对应路由时调用
+       // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
+     } */
+  },
+  {
+    path: "/auto/:id?",
+    name: "Auto",
+    component:Auto,
+    children: [{
+      path: 'profile',
+      component:UserProfile
+    }]
+  },
+  //将 props 传递给路由组件
+  {
+    path: '/user/:id',
+    component: User,
+    props: {
+      default: true,
+      sidebar:false
+    }
   }
 ]
 
@@ -21,5 +87,20 @@ const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
 })
-
+//----------------
+  /* 
+    1、导航被触发
+    2、在失活的组件里面调用beforeRouteLeave
+    3、调用全局的beforeEach守卫
+    4、在复用的组件里面调用beforeRouteUpdade守卫
+    5、在路由配置里调用beforeEnter
+    6、解析异步路由组件
+    7、在被激活的组建了调用beforeRouteEnter
+    8、调用全局的beforeResolve
+    9、导航确认
+    10、调用全局的afterEach钩子
+    11、触发DOM更新
+    12、调用beforeRouteEnter守卫传给next的回调函数，创建好的组件实例会作为回调函数的参数
+  */
+//-----------------
 export default router

src/views/Auto.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-11-02 09:26:16
+ * @LastEditTime: 2021-11-02 14:02:11
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\views\auto.vue
+-->
+<template>
+  <div>路由名字{{ r }}</div>
+  <router-view></router-view>
+</template>
+<script>
+export default {
+  name: "Auto",
+  data() {
+    return {
+      r: null
+    };
+  },
+  mounted() {
+    this.r = this.$route.params;
+  }
+};
+</script>

src/views/Foo.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-11-02 08:59:39
+ * @LastEditTime: 2021-11-03 08:39:46
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\views\Foo.vue
+-->
+<template>
+  <div>
+    into Foo page
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Foo",
+  beforeRouteEnter(to, from, next) {
+    // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ！
+    // 因为当守卫执行时，组件实例还没被创建！
+  },
+  beforeRouteUpdate(to, from) {
+    // 在当前路由改变，但是该组件被复用时调用
+    //举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2`之间跳转的时候，
+    // 由于会渲染同样的 `UserDetails`组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
+    //因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
+  }
+};
+</script>

src/views/User.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-11-02 14:50:24
+ * @LastEditTime: 2021-11-02 14:50:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\views\User.vue
+-->
+<template>
+  <div>
+    <div>User {{ $route.params.id }}</div>
+  </div>
+</template>

src/views/UserProfile.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-11-02 13:59:31
+ * @LastEditTime: 2021-11-02 14:25:58
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue-demo\src\views\UserProfile.vue
+-->
+<template>
+  <div>
+    设置UserProfile----qqqqq-vvvv
+    <div @click="goAbout" style="color:blue">去About</div>
+  </div>
+</template>
+<script>
+export default {
+  name: "UserProfile",
+  methods: {
+    goAbout() {
+      /*  this.$router.push({
+        path: "/about",
+        query: {
+          plain: "private"
+        }
+      }); */
+      this.$router.push({
+        name: "About",
+        params: { plain: "private", id: 1111 }
+      });
+      /* this.$router.push({
+        path: "/about",
+        hash: "#team"
+      }); */
+    }
+  }
+};
+</script>