• 九、Vue3基础之九

    文章目录

    一、可视化

    1.1 接口API 也是后端项目

    新建一个文件夹，在里面建一个index.ts
    安装依赖包

    npm install ts-node -g
npm init -y
npm install @types/node -D
npm install express -S
npm install @types/express -D
npm install axios -S

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    index.ts

    // Express 基于Node.js平台，快速，开放、极简的web开发框架
import express, {Express, Router, Request, Response} from 'express'
import axios from 'axios'
const app:Express = express ()
// 请求跨域，协议，主机，端口任意一个都是跨域请求

const router:Router = express.Router()

// 中间件注册一个路由
app.use('/api', router)

// 用路由来写我们的请求了,req前端传过来的，res返给前端的
router.get('/list', async (req:Request, res:Response)=>{
    const result = await axios.post('https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail,diseaseh55helf')
    res.json({
        data: result.data
    })
})

// 开一个服务
app.listen(3333, ()=>{
    console.log('success server http://localhost:3333')
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    package.json加一行代码可以执行npm run dev

    {
  "name": "demo005",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 这行代码加在这里
    "dev": "ts-node index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/node": "^18.11.9"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "express": "^4.18.2"
  }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    1.2 前端项目开始

    使用脚手架安装vue项目

    在这里插入图片描述
    安装依赖包

    npm install sass sass-loader -D

    • 1

    在src下建一个server用来请求api接口
    安装axios

    npm install axios -S

    • 1

    在server下建一个index.ts

    import axios from 'axios'

const server = axios.create({
    baseURL: "http://localhost:3333"
})

export const getApiList = () => server.get('/api/list').then(res=>res.data)


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在@/store下建一个index.ts用来存放pinia配置

    import { defineStore } from 'pinia'
import { getApiList  } from '@/server'
export const useStore = defineStore({
    id: 'apilist',
    state: ()=>({
        list: {}
    }),
    actions: {
        async getList(){
            const result = await getApiList()
            console.log(result)
        }
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在app.vue中测试是还在pinia中拿到请求的数据
    app.vue

    <template>

    <div class="box" :style="{background:`url(${bg})`}">
       <div class="box-left">hehediv>
       <div class="box-center">hehediv>
       <div class="box-right">hehediv>
    div>

template>

<script setup lang='ts'>
import bg from './assets/background.jpg'
import { useStore } from '@/stores'

// 通过pinia的action拿到请求的数据
const store = useStore()
store.getList()

script>

<style lang='scss'>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  margin: 0px;
}
.box{
  display: flex;
  justify-content: center;
  height: 100vh;
  .box-left{
    flex: 1;
  }
  .box-center{
    flex: 3;
  }
  .box-right{
    flex: 1;
  }
}

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    1.2.1 echarts

    安装依赖包

    npm install echarts -S

    • 1

    二、Vue3 Router

    vue是单页应用不会有那么多html让我们跳转，所以需要使用路由做页面的跳转，vue路由允许我们通过不同的URL访问不同的内容，通过vue路由可以实现多视图的单页web应用。

    构建前端项目

    npm init vue@latest
# 或者
npm init vite@latest

    • 1
    • 2
    • 3

    使用vue3安装对应的router4版本
    使用vue2安装对应的router3版本

    npm install vue-router@4
npm install vue-router -S

    • 1
    • 2

    2.1 Router的初步应用

    在src下建一个router文件夹，然后在下面再建一个index.ts，用来做router的配置

    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// 创建路由规则及对应的组件
const routes:Array<RouteRecordRaw> = [
    {
        path: '/', 
        component:()=>import('../components/Login.vue')
    },
    {
        path: '/reg', 
        component:()=>import('../components/Reg.vue')
    },
]

const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    将组件Login.vue及Reg.vue建好
    在main.ts中引入router

    import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// 将写的路由规则加载进来
import router from './router'

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


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在App.vue中使用路由

    <template>

    <div>
      <h2>hello,vite vue!h2>
      <router-link to="/">Loginrouter-link>
      <router-link to="/reg">Registerrouter-link>  
    div>
    
    <RouterView>RouterView>
template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

script>

<style lang='scss' scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    2.2 路由模式、Router原理

    vue2叫mode,vue3叫history

    vue2 mode history vue3 createWebHistory
    vue2 mode hash vue3 createWebHashHistory
    vue2 mode abstract vue3 createMemoryHistory SSR服务器渲染会开启这种模式
    createWebHashHistory
    在这里插入图片描述
    createWebHashHistory
    在这里插入图片描述

    2.3 命名路由、编程式导航

    定义命名路由

    import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'

// 创建路由规则及对应的组件
const routes:Array<RouteRecordRaw> = [
    {
        path: '/', 
        name: 'Login',  //命名路由
        component:()=>import('../components/Login.vue')
    },
    {
        path: '/reg', 
        name: 'Reg', //命名路由
        component:()=>import('../components/Reg.vue')
    },
]

const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    使用命名路由
    App.vue

    <template>

    <div>
      <h2>hello,vite vue!h2>
      
      <router-link :to="{name:'Login'}">Loginrouter-link>
      <router-link :to="{name: 'Reg'}">Registerrouter-link>  
    div>
    
    <RouterView>RouterView>
template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

script>

<style lang='scss' scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    使用js的方式跳转路由
    App.vue — 直接传字符串路径的方式跳转

    <template>

    <div>
      <h2>hello,vite vue!</h2>
      <!-- 定义两个按钮，通过点击事件跳转 -->
      <button @click="toPage('/')">Login</button>
      <button @click="toPage('/reg')">Reg</button>
    </div>
    <!-- 路由匹配到的组件会显示在这里 -->
    <RouterView></RouterView>
</template>

<script setup lang='ts'>
import { useRouter } from 'vue-router';
const router = useRouter()

const toPage = (url:string) => {
    // 字符串
    router.push(url)
}

</script>

<style lang='scss' scoped>

</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    App.vue — 传命名路由、对象方式跳转

    <template>

    <div>
      <h2>hello,vite vue!h2>
      
      <button @click="toPage('Login')">Loginbutton>
      <button @click="toPage('Reg')">Regbutton>
    div>
    
    <RouterView>RouterView>
template>

<script setup lang='ts'>
import { useRouter } from 'vue-router';
const router = useRouter()

const toPage = (url:string) => {
    // 字符串
    // 对象 传一些参数去
    // router.push({
    //   path: url
    // })
    // 命名式
    router.push({
      name: url
    })
}

script>

<style lang='scss' scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    2.4 历史记录

    <template>

    <div>
      <h2>hello,vite vue!h2>
      
      <router-link replace :to="{name: 'Login'}">Login router-linkrouter-link>
      <router-link replace :to="{name: 'Reg'}">Reg router-linkrouter-link>
      
      <button @click="toPage('Login')">Loginbutton>
      <button @click="toPage('Reg')">Regbutton>
      <button @click="next">nextbutton>
      <button @click="prev">prevbutton>
    div>
    
    <RouterView>RouterView>
template>

<script setup lang='ts'>
import { useRouter } from 'vue-router';
const router = useRouter()

const toPage = (url:string) => {
    // 将push改成replace不保存历史记录
    router.push({
      name: url
    })
}
const next = ()=>{
  router.go(1)
}
const prev = ()=>{
  router.back()
}
script>

<style lang='scss' scoped>

style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    2.5 路由传参

    建一个数据文件，模拟数据 list.json

    {
    "data" : [
        {
            "name" : "iphone手机",
            "price": 8000,
            "id": 1
        },
        {
            "name" : "华为手机",
            "price": 6000,
            "id": 2
        },
        {
            "name" : "小米手机",
            "price": 2000,
            "id": 3
        }
    ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    安装插件JSON to TS,将json转换成TS的类型
    选中json中的代码按ctrl + shift + alt + s
    跳转用useRouter,用路由中的数据用useRoute
    跳转路由传参到一个组件，并在这个组件中读取传过来的参数
    使用Query传参
    展示数据组件

    <template>

    <div>
        <h2>列表h2>
    div>
    <table border="1">
        <thead>
            <tr>
                <th>品牌th>
                <th>价格th>
                <th>操作th>
            tr>
        thead>
        <tbody>
            <tr v-for="item in data" :key="item.id">
                <td>{{item.name}}td>
                <td>{{item.price}}td>
                
                <td><button @click="toDetail(item)">详情button>td>
            tr>
        tbody>
    table>

template>

<script setup lang='ts'>
import { data } from './list.json'
import { useRouter } from 'vue-router'
const router = useRouter()
type Item = {
  name: string;
  price: number;
  id: number;
}

const toDetail = (item:Item)=>{
    // 跳转详情页面并携带有query参数，我们可以reg页面去取传过去的值
    router.push({
        path: '/reg',
        query: item
    })
}

script>

<style lang='scss' scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    详情页组件

    <template>

    <div>
        <h2>Register 详情页h2>
        <br>
        <button @click="router.back()">返回button>
    div>
    <div>名称：{{route.query.name}}div>
    <div>价格:{{route.query.price}}div>
    <div>ID:{{route.query.id}}div>

template>

<script setup lang='ts'>
import { useRoute, useRouter} from 'vue-router'
// 跳转路由使用useRouter
const router = useRouter()
// 获取路由中的数据使用useRoute
const route = useRoute()

script>

<style lang='scss' scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    使用params传参，必须是命名路由

    2.6 嵌套路由

    import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'

// 创建路由规则及对应的组件
const routes:Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/parent.vue'),
        children:[
            {
                path: '', 
                name: 'Login',  //命名路由
                component:()=>import('../components/Login.vue')
            },
            {
                path: 'reg', 
                name: 'Reg', //命名路由
                component:()=>import('../components/Reg.vue')
            },
        ]
    }
    
]

const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    2.7 命名视图

    命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。命名视图的概念非常类似于"具名插槽"，并且视图的默认名称也是default。
    一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件，确保正确使用components配置(加上s)

    在这里插入图片描述
    在这里插入图片描述
    注意组件与路由之间的关系

    2.8 重定向、别名

    重定向redirect：字符串形式配置，访问/重定向到/user（地址栏显示/,内容为/user路由的内容）

    import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'

// 创建路由规则及对应的组件
const routes:Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        // 重定向方式一
        // redirect: {
        //     path: '/user1'
        // },
        
        // 重定向方式二
        // redirect:to=>{
        //     console.log(to)
        //     return '/user1'
        // },
        
        // 重定向方式三
        redirect:to=>{
            console.log(to)
            return {
                path: '/user1',
                query: {
                    name: 'kk'
                }
            }
        },

        //别名 给path:'/'命别名
        alias: ['/root', '/haha'],
 
        children:[
            {
                path: '/user1', 
                components:{
                    default:()=>import('../components/A.vue')
                }
            },
            {
                path: '/user2', 
                components:{
                    bbb:()=>import('../components/C.vue'),
                    ccc:()=>import('../components/C.vue')
                }
            }
        ]
    }
    
]

const router = createRouter({
    history:createWebHistory(),
    routes
})

export default router

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    2.9 导航守卫（前置守卫）

    全局前置守卫，也可叫中间件，我们的路由跳转，前进、后退都会走这个函数，所以可以叫做中间件
    做路由权限设置时经常用到
    每个守卫方法接收三个参数

    • to: Route,即将要进入的目标路由对象
    • from：Route,当前导航正要离开的路由对象
    • next：进行管道中的下一个钩子，如果全部钩子执行完了，则导航的状态是confirmed（确认的）
    • next(false)： 中断当前的导航，如果浏览器的URL改变了（可能是用户手动或者浏览器后退按钮），那么URL会重置到from的状态。
    • next(“/”)或者next({path: ‘/’})：跳转到一个不同的地址，当前的导航被中断，然后进行一个新的导航。

    step1：在main.ts中建一个前置守卫(也可叫中间件)对请求进行过滤

    import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// 将写的路由规则加载进来
import router from './router'

// 白名单
const whileList = ['/']

// 全局路由中间件（前置路由守卫）
router.beforeEach((to, from, next)=>{
    if(whileList.includes(to.path) || localStorage.getItem('token')){
        next()
    }else{
        next('/')
    }
})

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    step2:在src下建一个views文件夹，在里面建Login.vue, index.vue两个组件
    目的：必须登陆用户才能访问index.vue组件，不过是根据前置路由守卫来进行过滤的。
    Index.vue

    <template>

    <div>
        嘎嘎我进来了
        {{route.query.name}}
        {{route.query.password}}
    div>

template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

if(route.query.name&&route.query.password){
    localStorage.setItem('token', '1')
}else{
    console.log('error')
}

script>

<style lang='scss' scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    Login.vue

    <template>

    <div>
        用户名: <input type="text" v-model="user.name"> <br>
        密码: <input type="text" v-model="user.password">  <br>
        <button @click="submit">登陆button>
    div>

template>

<script setup lang='ts'>
import { ref, reactive, toRaw } from 'vue'
import { useRouter } from 'vue-router'
type User = {
    name: string,
    password: string
}

const router = useRouter()

let user = reactive<User>({name: '', password: ''})
const submit = () => {
    router.push({
        path: '/index',
        query: user
    })
}

script>

<style lang='scss' scoped>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    step3: 路由的配置
    router/index.ts

    import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'
const router = createRouter({
    history:createWebHistory(),
    routes: [
        {
            path: '/',
            component: ()=>import('../views/Login.vue')
        },
        {
            path: '/index',
            component: ()=>import('../views/Index.vue')
        }
    ]
})

export default router

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    2.10 全局后置守卫

    使用场景，可以用来做登录进度条。
    router.afterEach(to, from) => {
    Vnode.component?.exposed?.endLoading()
    }
    可以注册全局后置钩子，和前置守卫不同的是，这些钩子不会接受next函数也不会改变导航本身。
    在进入路由之前开启进度条，之后呢给他清掉。

    2.11 路由元信息

    通过路由记录的meta属性可以定义路由的元信息，使用路由元信息可以在路由中附加自定义的数据，如：

    • 权限校验标识
    • 路由组件的过渡名称
    • 路由组件持久化缓存(keep-alive)的相关配置
    • 标题名称

    可在以导航守卫或者是路由对象中访问路由的元信息数据,进入路由设置title之类的

    2.12 滚动行为

    使用前端路由，当切换到新路由时，想要页面滚到顶部，或者保持原先的滚动位置，就像重新加载页面那样，vue-route可以自定义路由切换时页面如何滚动
    当创建一个Router实例，你可以提供一个scrollBehavior方法

    const router = createRouter({
    history: createWebHistory(),
    scrollBehavior: (to, from, savePosition) => {
        console.log(to, '======>', savePosition)
        return new Promise((r)=>{
            setTimeout(() => {
                r({
                    top: 10000
                })
            }, 2000)
        })
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    router/index.ts

    import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history:createWebHistory(),
    scrollBehavior: (to, from, savePosition) => {
        console.log(savePosition)
        if(savePosition){  //如果savePosition有值，返回这个值
            return savePosition
        }else{
            return {
                top: 0
            }
        }
    },
    routes: [
        {
            path: '/',
            component: ()=>import('../views/Login.vue')
        },
        {
            path: '/index',
            component: ()=>import('../views/Index.vue')
        }
    ]
})

export default router

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    2.13 动态路由

    不同的用户进去系统看到的菜单是不一样的

  • 相关阅读:
    Linux安装达梦数据库DM8
    当进程退出和机器宕机时TCP连接发生什么
    （一）Ansible-介绍及安装
    使用XLua在Unity中获取lua全局变量和函数
    ORI-GB-NP半乳糖介导冬凌草甲素/姜黄素牛血清白蛋白纳米粒的研究制备方法
    zaabix实现对nginx监控
    C++入门知识（二）
    数学建模——差分方程结论介绍
    MySQL之事务，锁， MVCC
    【COMSE 2022已检索】2023年材料科学与工程国际会议（COMSE 2023）火热征稿中！
  • 原文地址：https://blog.csdn.net/weixin_42710036/article/details/127862773