Vue3.0商店后臺管理系統(tǒng)項目實戰(zhàn)-路由(5)

參考資料

1:router-link和router-view的區(qū)別

在App.vue里面

router-link相當于是a標簽 账月,to="路由path"

 <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>

router-view:展示路由對應的組件內(nèi)容

在views底下新建一個組件LayOut


<template>
    <div>
        <p>導航</p>
    </div>
</template>

<script>
export default {
    name:"layout",
    setup() {
        
    },
}
</script>

并且打開router/index.js配置路由


在瀏覽器里面查看


router-view:展示路由對應的組件內(nèi)容


2:嵌套路由/子路由
createWebHasHistory:哈希路由 訪問路徑 有#
createWebHistory:history模式路由   訪問路徑 無#

在views底下新建一個角色列表頁和用戶列表頁


roleList.vue

<template>
    <div>
        <h1>角色列表</h1>
    </div>
</template>

<script>
export default {
    name:"role",
    setup() {
        
    },
}
</script>

userList.vue

<template>
    <div>
        <h1>用戶列表</h1>
    </div>
</template>

<script>
export default {
    name:"user",
    setup() {
    },
}
</script>

在router/index.js里面,添加路由

  //嵌套路由/子路由
    children:[
      {
        path:"/index",
        name:"role",
        component:()=>import('../views/pages/roleList.vue'),
      },{
        path:"/user",
        name:"user",
        component:()=>import('../views/pages/userList.vue'),
      }
    ]

index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'layOut',
    redirect: "/index",//重定向 進來就自動默認到index路徑
    component: () => import('../views/LayOut/LayOut.vue'),

    //嵌套路由/子路由
    children: [
      {
        path: "/role",
        name: "role",
        component: () => import('../views/pages/roleList.vue'),
      }, {
        path: "/user",
        name: "user",
        component: () => import('../views/pages/userList.vue'),
      }
    ]
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

側(cè)邊欄導航
vue3搭配Element Plus框架使用
Element Plus基于 Vue 3诞外,面向設計師和開發(fā)者的組件庫
文檔:https://element-plus.gitee.io/zh-CN/

安裝

# NPM
$ npm install element-plus --save
圖片.png

安裝完成之后開始引入
打開main.js的文件
這里接口文檔上是有說明的 棠耕,直接根據(jù)文檔上的教程來寫


圖片.png

main.js


import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

開始使用組件里面的布局
后臺管理的布局
直接復制代碼即可


 <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>

LayOut.vue

<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <router-link to="/index">角色列表</router-link>
            <router-link to="/user">用戶列表</router-link></el-aside
          >
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  setup() {},
};
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市搔涝,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖破停,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蕉鸳,死亡現(xiàn)場離奇詭異乎赴,居然都是意外死亡,警方通過查閱死者的電腦和手機潮尝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門榕吼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人勉失,你說我怎么就攤上這事羹蚣。” “怎么了乱凿?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵度宦,是天一觀的道長。 經(jīng)常有香客問我告匠,道長戈抄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任后专,我火速辦了婚禮划鸽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘戚哎。我一直安慰自己裸诽,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布型凳。 她就那樣靜靜地躺著丈冬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪甘畅。 梳的紋絲不亂的頭發(fā)上埂蕊,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音疏唾,去河邊找鬼蓄氧。 笑死,一個胖子當著我的面吹牛槐脏,可吹牛的內(nèi)容都是我干的喉童。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼顿天,長吁一口氣:“原來是場噩夢啊……” “哼堂氯!你這毒婦竟也來了蔑担?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤咽白,失蹤者是張志新(化名)和其女友劉穎啤握,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體局扶,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡恨统,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年叁扫,在試婚紗的時候發(fā)現(xiàn)自己被綠了三妈。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡莫绣,死狀恐怖畴蒲,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情对室,我是刑警寧澤模燥,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站掩宜,受9級特大地震影響蔫骂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜牺汤,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一辽旋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧檐迟,春花似錦补胚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至敦间,卻和暖如春瓶逃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背廓块。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工金闽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人剿骨。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓代芜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親浓利。 傳聞我的和親對象是個殘疾皇子挤庇,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容