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

本文详细介绍了在Vue.js中使用`vue-router`进行路由跳转,包括基本路由配置、动态路由匹配、参数传递以及嵌套路由的应用实例,展示了如何在组件间进行导航和处理404情况。
摘要由CSDN通过智能技术生成
  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
  • 23
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值