欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3使用vue-router嵌套多級路由的方法

 更新時間：2023年12月18日 16:10:40   作者：hhzz  
Vue3 嵌套路由的使用和 Vue2 相差不大,主要的區(qū)別是 Vue3 的路由實例化使用了 createApp() 方法,所以實例化路由時需要傳入根組件,這篇文章主要介紹了vue3使用vue-router嵌套路由(多級路由),需要的朋友可以參考下

1、Vue3 嵌套路由

Vue3 嵌套路由的使用和 Vue2 相差不大，主要的區(qū)別是 Vue3 的路由實例化使用了 createApp() 方法，所以實例化路由時需要傳入根組件。另外，Vue3 的路由對象除了包含 Vue2 中的導航守衛(wèi)、導航鉤子和解析守衛(wèi)等功能外，還新增了 meta prop 和 route prop。

在使用嵌套路由時，建議將路由按照功能模塊進行分層，每一層代表一個主要的功能塊，每個層級下的路由數(shù)量不要過多，一般建議不要超過 10 個，層級也不要超過 5 層。同時，根據(jù)實際業(yè)務需求，可以適當調(diào)整路由層級和數(shù)量，以達到更好的管理和使用效果。

2、項目結構

3、編寫相關頁面代碼

3.1、編寫route文件下 index.ts文件

route文件下 index.ts文件代碼：

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'Homeindex',
    component: () => import('../views/Home/index.vue'),
    meta: {
      title: 'Home Page',
      roles: ['admin', 'admin1']
    },
    children: [
      {
        path: 'tigerhhzz',
        name: 'Tigerhhzz',
        component: () => import('@/views/Home/Tigerhhzz.vue'),
        // 也可以使用props傳參方式接收傳來的參數(shù)
        props: (propsRouter) => {
          // console.log('props >router', propsRouter)
          // 可以return query 也可以return params支持兩種傳參方式
          return propsRouter.query
        },
        // 多級嵌套 建議用query傳參
        children: [
          {
            path: 'childA',
            name: 'ChildA',
            component: () => import('@/views/Home/ChildA.vue'),
          },
        ]
      },
      {
        path: 'tigerhhzzb/:id/:title', // 提前定義params參數(shù)（可以定義多個）
        name: 'Tigerhhzzb',
        component: () => import('@/views/Home/Tigerhhzzb.vue'),
      },
    ]
  },
]
export const router = createRouter({
  // 路由的history模式，共有三種模式，
  // createWebHistory、createWebHashHistory、createMemoryHistory
  // history: createWebHashHistory(),
  history: createWebHistory(),
  // 路由配置
  routes,
  // 是否嚴格匹配路由
  strict: true,
  // 路由跳轉(zhuǎn)完成后，頁面滾動行為
  scrollBehavior: () => ({ left: 0, top: 0 }),
})

3.2、main.ts文件代碼：

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import {router} from './router/index'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

3.3、App.vue文件代碼：

<script>
import { defineComponent } from 'vue'
 // vue3.0版本語法
export default defineComponent({
  name: 'App',
})
</script>
<template>
  <RouterView />
</template>
<style>
</style>

3.4、views文件夾下的Home文件夾下的index.vue文件代碼：

<template>
  <div class="home">
    <h2>首頁{{ title }}</h2>
    <!-- 模擬有權限時顯示 -->
    <div v-if="roles.includes(role)">
      <h2>嵌套路由</h2>
      <router-link to="/home/tigerhhzz">push跳轉(zhuǎn)到/home/tigerhhzz頁面</router-link>
      <br>
      <!-- 加了/就要寫全 /home/lxb -->
      <router-link replace to="/home/tigerhhzzb/id:2/title:102">push跳轉(zhuǎn)到/home/tigerhhzzb頁面</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  name: 'Homeindex',
  setup() {
    const router = useRouter()
    const route: any = useRoute()
    const state = reactive({
      title: '',
      role: '', // 我的當前角色
      roles: [''],
      routerGo: (path) => {
        if (path === 'lx') {
          // query傳參可以用path 也可以用name: Lx
          router.push({
            path: path,
            query: {
              title: '101',
              id: 1
            }
          })
          // router.replace
        } else {
          // params傳參只能用name
          router.replace({
            // path: path + '/id:2/title:102',
            name: 'Lxb',
            params: {
              title: '102',
              id: 2
            }
          })
        }
      },
    })
    onMounted(() => {
      console.log('/home', route)
      state.title = route.meta.title
      state.roles = route.meta.roles
      // 模擬一個接口
      setTimeout(() => {
        const res = {
          code: 200,
          data: {
            token: '123456',
            userName: '吳彥祖',
            role: 'admin'
          }
        }
        state.role = res.data.role
      }, 0)
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>
<style>
.home {
  color: pink;
  font-size: 14px;
}
</style>

3.5、views文件夾下的Home文件夾下的Tigerhhzzb.vue文件代碼：

<template>
  <div style="font-size: 14px;">
    <h2>我是練習b{{ route?.params?.title }}頁面</h2>
    <div>id:{{ route?.params?.id }}</div>
    <button @click="routerGoBack">返回首頁</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// vue3.0語法
export default defineComponent({
  name: 'Tigerhhzzb',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state: any = reactive({
      routerGoBack: () => {
        router.replace('/home')
        // 由replace跳轉(zhuǎn)進來的不可以使用router.go(-1) 路由棧是空的》回不到上一個路由
      },
    })
    onMounted(() => {
      console.log(route)
    })
    return {
      route,
      ...toRefs(state)
    }
  },
})
</script>

3.6、views文件夾下的Home文件夾下的T.vue文件代碼：

<template>
  <div style="font-size: 14px;">
    <h2>我是練習{{ title }}頁面</h2>
    <div>id:{{ id }}</div>
    <div>props: {{ props }}</div>
    <button @click="routerGoBack">返回上一頁</button>
    <br>
    <button @click="routerGo('/home/lx/childA')">去子路由childA</button>
    <!-- <router-view></router-view> -->
    <router-view />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// vue3.0語法
export default defineComponent({
  name: 'Tigerhhzz',
  props: {
    id: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const state: any = reactive({
      id: '',
      title: '',
      routerGoBack: () => {
        router.go(-1) // go(-1)回到上一個路由
        // 也可以用router.replace('/home')跳回指定頁
      },
      routerGo: (path) => {
        router.push(path)
      }
    })
    onMounted(() => {
      console.log('lx route', route)
      console.log('lx props', props)
      if (route.query) {
        state.id = route.query.id
        state.title = route.query.title
      }
    })
    return {
      props,
      ...toRefs(state)
    }
  },
})
</script>

3.7、views文件夾下的Home文件夾下的ChildA.vue文件代碼：

<template>
    <div style="font-size: 14px;background: skyblue;">
      <h3>我是ChildA組件</h3>
      <h3>route.query:{{ route.query }}</h3>
    </div>
  </template>
  <script lang="ts">
  import { defineComponent, onMounted, } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  // vue3.0語法
  export default defineComponent({
    name: 'ChildA',
    setup() {
      const router = useRouter()
      const route = useRoute()
      function goBack() {
        router.go(-1)
      }
      onMounted(() => {
        console.log(route)
      })
      // 可以在頁面銷毀前清除事件
      // onUnmounted(() => {
      //   proxy.$mittBus.off('mittUserA')
      // })
      return {
        route, goBack
      }
    },
  })
  </script>

4、測試效果 初始頁面效果：

先點擊push跳轉(zhuǎn)到/home/tigerhhzzb頁面>（嵌套一層的路由）頁面效果：
嵌套一層的路由從原本/home跳入了/home/tigerhhzzb 子路由頁面，點擊回到首頁。

再點擊push跳轉(zhuǎn)到/home/tigerhhzz頁面>（嵌套多層的路由）頁面效果：

子路由效果：

先去到了第一層/home/tigerhhzz子路由頁面，

再點擊去子路由childA按鈕>頁面效果：

進到了嵌套的第二層/home/tigerhhzz/childA子路由頁面

點擊可返回上一頁/home/lx 再點擊可回到/home首頁。

到此這篇關于vue3使用vue-router嵌套路由(多級路由)的文章就介紹到這了,更多相關vue3嵌套多級路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論