vue-router子路由的實現(xiàn)方式

更新時間：2023年02月06日 16:45:50 作者：楊哥學編程

這篇文章主要介紹了vue-router子路由的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

實驗目的

在我們的商城項目中，后臺管理頁 Admin 涉及到很多操作頁面，比如：

/admin 主頁面
/admin/create 創(chuàng)建新信息
/admin/edit 編輯信息

讓我們通過嵌套路由的方式將它們組織在一起。

創(chuàng)建Admin頁面

在src/views下創(chuàng)建 Admin.vue，并創(chuàng)建admin目錄，以用來存放admin的子頁面（使用vue-router的子路由，需要在父組件利用 router-view占位）

Admin.vue

<template>
? <div class="title">
? ? <h1>{{ msg }}</h1>
? ? <!-- 路由插槽 -->
? ? <router-view></router-view>
? </div>
</template>

<script>
export default {
? name: "home",

? data() {
? ? return {
? ? ? msg: "This is the Admin Page",
? ? };
? },
};
</script>

<style scoped>
</style>

創(chuàng)建子頁面

在src/views下創(chuàng)建admin目錄用來存放admin的子頁面，在admin目錄下新建Create.vue 和 Edit.vue 來實現(xiàn)/create 創(chuàng)建新的商品/edit 編輯商品信息

Create.vue

<template>
? <div>
? ? <div class="title">
? ? ? <h1>This is Admin/Create</h1>
? ? </div>
? </div>
</template>

Edit.vue

<template>
? <div>
? ? <div class="title">
? ? ? <h1>This is Admin/Edit</h1>
? ? </div>
? </div>
</template>

修改router/index.js代碼

增加子路由，子路由的寫法是在原有的路由配置下加入children字段。

children:[
? ? {path:'/',component:xxx},
? ? {path:'xx',component:xxx}
]

注意： children里面的path 不要加 / ，加了就表示是根目錄下的路由。

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Admin from '@/views/Admin.vue'

// 導入admin子路由
import Create from '@/views/admin/Create';
import Edit from '@/views/admin/Edit';

Vue.use(VueRouter)

const routes = [
? {
? ? path: '/admin',
? ? name: 'Admin',
? ? component: Admin,
? ? children: [
? ? ? {
? ? ? ? path: 'create',
? ? ? ? component: Create,
? ? ? },
? ? ? {
? ? ? ? path: 'edit',
? ? ? ? component: Edit,
? ? ? }
? ? ]
? }
]

const router = new VueRouter({
? routes
})

export default router

至此 Vue-router 子路由（嵌套路由）創(chuàng)建完成