Vue3.0商店後臺管理系統項目實戰-路由

1：router-link和router-view的區別

在App.vue裏面

router-link相當於是a標籤 ，to="路由path"

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

router-view:展示路由對應的組件內容

在views底下新建一個組件LayOut

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

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

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

在瀏覽器裏面查看

router-view:展示路由對應的組件內容

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

側邊欄導航
vue3搭配Element Plus框架使用
Element Plus基於 Vue 3，面向設計師和開發者的組件庫
文檔：https://element-plus.gitee.io/zh-CN/

安裝

# NPM
$ npm install element-plus --save

安裝完成之後開始引入
打開main.js的文件
這裏接口文檔上是有說明的 ，直接根據文檔上的教程來寫

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>