本篇內(nèi)容主要講解“Vue-router子路由怎么創(chuàng)建”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue-router子路由怎么創(chuàng)建”吧!

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為蘭山等服務(wù)建站，蘭山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為蘭山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

實(shí)驗(yàn)?zāi)康?/h3>

在我們的商城項(xiàng)目中，后臺管理頁 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">
    <h2>{{ msg }}</h2>
    <!-- 路由插槽 -->
    <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 來實(shí)現(xiàn)/create 創(chuàng)建新的商品/edit 編輯商品信息

• Create.vue

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

• Edit.vue

<template>
  <div>
    <div class="title">
      <h2>This is Admin/Edit</h2>
    </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'// 導(dǎo)入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)建完成在應(yīng)用界面開發(fā)中通常由多層嵌套的組件組合而成。但隨著頁面的增多，如果把所有的頁面都塞到一個 routes 數(shù)組里面會顯得很亂，你無法確定哪些頁面存在關(guān)系。借助 vue-router 提供了嵌套路由的功能，讓我們能把相關(guān)聯(lián)的頁面組織在一起。

到此，相信大家對“Vue-router子路由怎么創(chuàng)建”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

新聞名稱：Vue-router子路由怎么創(chuàng)建
轉(zhuǎn)載來源：http://www.rwnh.cn/article44/igpsee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、服務(wù)器托管、面包屑導(dǎo)航、App設(shè)計(jì)、動態(tài)網(wǎng)站、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)