vue-router 路由跳转、带参动态路由匹配、404路由和嵌套路由

1. 路由跳转

   1. 核心代码

      import { useRouter,useRoute } from 'vue-router';
      const $router = useRouter()
      const $route = useRoute()
      const toAbout = () => {
          console.log($router)
          $router.push('/about/888')
      }

   2. 全部代码

      1. 常量路由

         export const constantRoute = [
             {
                 path: '/about/:id',
                 component:()=> import('../vue-base/about1.vue')
             },
             {
                 path: '/',
                 component:()=> import('../vue-base/home.vue')
             },
             {
                 path: '/about',
                 component:()=> import('../vue-base/about.vue')
             },
             { path: '/:pathMatch(.*)*', name: 'NotFound', component: ()=>import('../vue-base/404.vue') },
         
         ]

      2. home.vue

         <template>
             <div>
                 <h1>我是home</h1>
                 <router-link to="/about/123">Go to about1</router-link>
                 <br>
                 <button @click="toAbout">点我前往About页面</button>
             </div>
         </template>
         
         <script setup lang="ts">
         import { useRouter } from 'vue-router';
         let $router = useRouter()
         const toAbout = () => {
             console.log($router)
             $router.push('/about')
         }
         </script>
         
         <style scoped></style>

      3. about.vue

         <template>
             <div>
                 <h1>about</h1>
                 <router-link to="/home">Go to Home</router-link>
                 <br>
                 <button @click="toAbout">点我前往About1页面</button>
             </div>
         </template>
         
         <script setup lang="ts">
         import { useRouter,useRoute } from 'vue-router';
         const $router = useRouter()
         const $route = useRoute()
         console.log($route)
         const toAbout = () => {
             console.log($router)
             $router.push('/about/888')
         }
         </script>
         
         <style scoped></style>

      4. about1.vue

         <template>
             <div>
                 home1
                 <br>
                 <button @click="toHome">点我也可以前往Home页面</button>
                 <h1>{{  params}}</h1>
             </div>
         </template>
         
         <script setup lang="ts">
         import { useRouter,useRoute } from 'vue-router';
         import { ref,computed } from 'vue';
         let params = ref()
         const $router = useRouter()
         const $route = useRoute()
         console.log($route)
         params.value = computed(()=> 
            Number($route.params.id)
         )
         const toHome = () => {
             console.log($router)
             $router.push('/')
         }
         </script>
         
         <style scoped></style>

      5. 效果

         1. home

         2. about

         3. about1

         4. 404

             

2. 带参数的动态路由匹配

   1. 核心代码

      export const constantRoute = [
          {
              path: '/about/:id',
              component:()=> import('../vue-base/about1.vue')
          },
      ]

   2. 匹配途径

3. 404路由

   1. 核心代码

      export const constantRoute = [
          { path: '/:pathMatch(.*)*', name: 'NotFound', component: ()=>import('../vue-base/404.vue') },
      ]

4. 嵌套路由

   1. 核心代码

      export const constantRoute = [
          {
              path: '/about/:id',
              component:()=> import('../vue-base/about1.vue'),
              redirect:'/about/:id/AboutChildren1',
              children:[
                  {
                      path:'AboutChildren1',
                      component:()=>import('../vue-base/aboutChildren1.vue')
                  },
                  {
                      path:'AboutChildren2',
                      component:()=>import('../vue-base/aboutChildren2.vue')
                  }
              ]
          }
      ]

   2. about1.vue

      <template>
          <div>
              about1
              <br>
              <button @click="toHome">点我也可以前往Home页面</button>
              <h1>{{  params}}</h1>
              <button @click="toAboutChildren">点我可以前往AboutChildren页面</button>
              <router-view></router-view>
          </div>
      </template>
      
      <script setup lang="ts">
      import { useRouter,useRoute } from 'vue-router';
      import { ref,computed } from 'vue';
      let params = ref()
      const $router = useRouter()
      const $route = useRoute()
      console.log($route)
      params.value = computed(()=> 
         Number($route.params.id)
      )
      const toHome = () => {
          console.log($router)
          $router.push('/')
      }
      const toAboutChildren = ()=>{
          $router.push('/about/8888/AboutChildren1')
      }
      
      </script>
      
      <style scoped></style>

   3. aboutChildren1.vue

      <template>
          <div>
              <h1>我是AboutChildren1</h1>
              <br>
              <router-link to="/"></router-link>
          </div>
      </template>
      
      <script setup lang="ts">
      
      </script>
      
      <style scoped></style>

   4. aboutChildren2.vue

      <template>
          <div>
              <h1>我是AboutChildren2</h1>
              <br>
              <router-link to="/"></router-link>
          </div>
      </template>
      
      <script setup lang="ts">
      
      </script>
      
      <style scoped></style>

   5. 效果
      1. about
      2. aboutChildren1
      3. aboutChildren2