在Vue 3中，可以通过路由嵌套来创建嵌套的视图结构。下面是一个示例，展示如何在Vue 3中进行路由嵌套：

        首先，创建一个父路由组件，用于包含子路由组件的占位符：

<template>

<div>

<h1>Parent Component</h1>

<router-view></router-view>

</div>

</template>

        然后，创建子路由组件，用于嵌套在父路由组件中：

<template>

<div>

<h2>Child Component</h2>

<router-view></router-view>

</div>

</template>

        接下来，在路由配置中，定义父路由和子路由的关系：

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

import ParentComponent from '@/components/ParentComponent.vue';

import ChildComponent from '@/components/ChildComponent.vue';

const routes = [

{

path: '/parent',

component: ParentComponent,

children: [

{

path: 'child',

component: ChildComponent

}

]

}

];

const router = createRouter({

history: createWebHistory(),

routes

});

export default router;

        最后，将路由配置应用到Vue应用程序中：

        在上述示例中，我们定义了一个父路由/parent，以及一个子路由/parent/child。在父路由组件中，使用<router-view><router-view>占位符来渲染子路由组件。

        这样，在访问/parent路径时，父路由组件会渲染，并在占位符中渲染子路由组件；而在访问/parent/child路径时，父路由组件和子路由组件都会渲染。

6.路由守卫

        在Vue 3中，可以使用路由守卫来控制路由的访问权限和导航行为。下面是一些常用的路由守卫：

        全局前置守卫：在路由导航之前被调用，可以用来进行身份验证或者全局的路由拦截。可以通过router.beforeEach注册全局前置守卫。

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

const router = createRouter({

history: createWebHistory(),

routes

});

router.beforeEach((to, from, next) => {

// 进行身份验证或者路由拦截逻辑

next();

});

        路由独享的守卫：可以在路由配置中为特定的路由定义守卫，该守卫只在该路由被访问时执行。可以通过在路由配置对象上定义beforeEnter函数来注册路由独享的守卫。

const routes = [

{

path: '/protected',

component: ProtectedComponent,

beforeEnter: (to, from, next) => {

// 进行身份验证或者路由拦截逻辑

next();

}

}

];

        组件内的守卫：可以在组件中定义beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave这三个方法作为组件内的守卫。这些守卫可以访问组件的实例，并且可以用来处理组件在路由变化时的情况。

const SomeComponent = {

// ...

beforeRouteEnter(to, from, next) {

// 在路由进入组件之前调用

next();

},

beforeRouteUpdate(to, from, next) {

// 在当前路由改变，但是组件被复用时调用

next();

},

beforeRouteLeave(to, from, next) {

// 在离开当前组件的路由之前调用

next();

}

}

9.pinia:vue3状态管理

        Pinia 是一个基于 Vue 3 的状态管理库。它提供了一种简单、强大和可扩展的方式来管理应用程序的状态。

        要使用 Pinia，你需要先安装它并在你的 Vue 3 项目中引入它。以下是使用 Pinia 的基本步骤：

        安装 Pinia：

npm install pinia

        在你的 main.js (或其他入口文件) 中引入 Pinia 并创建 Pinia 实例：

import { createApp } from 'vue'

import { createPinia } from 'pinia'

const app = createApp(...)

const pinia = createPinia()

app.use(pinia)

        创建你的状态模块（option传参）：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {

state: () => ({

count: 0,

}),

getters: {

doubleCount: (state) => state.count * 2,

},

actions: {

increment() {

this.count++

},

},

})

        在这个示例中，我们创建了一个名为 counter 的状态模块，它包含一个名为 count 的状态和一个名为 doubleCount 的 getter，以及一个名为 increment 的 action。

        在你的组件中使用状态：

<template>

<div>

<p>Count: { { counter.count }}</p>

<p>Double Count: { { counter.doubleCount }}</p>

<button @click="counter.increment()">Increment</button>code>

</div>

</template>

<script>

import { useCounterStore } from './store'

export default {

setup() {

const counter = useCounterStore()

return {

counter,

}

},

}

</script>

        在这个示例中，我们使用 useCounterStore 函数来创建一个与 counter 状态模块关联的实例。然后，在模板中可以直接访问状态和调用 action。

          创建你的状态模块（setup传参）：

import { defineStore } from "pinia";

import{ref ,computed} from 'vue'

export const useStockStore=defineStore('stock',()=>{

const stock=ref(20)

function setStock(val){

stock.value=val

}

function addStock(){

stock.value++

}

const doubleStock=computed(()=>{

return stock.value*2

})

function subStock(){

stock.value--

}

return{

stock,

setStock,

addStock,

subStock,

doubleStock

}

})

<template>

<div class="add">code>

<h3>Add组件</h3>

<p>已知库存数:{ { stockStore.stock }}</p>

<button @click="stockStore.addStock()">库存+1</button>code>

</div>

</template>

<script setup>

import {useStockStore} from '@/stores/counter'

const stockStore=useStockStore()

</script>

<style scoped>

</style>

<template>

<div>

库存总数：<input type="number" v-model.number="stockStore.stock">code>

<p>stock的翻倍值={ { stockStore.doubleStock }}</p>

<hr />

<Add />

<hr />

<Sub />

</div>

</template>

<script setup>

import Add from './components/Add.vue';

import Sub from './components/Sub.vue';

import { useStockStore } from './stores/counter';

const stockStore=useStockStore()

</script>

<style>

#app {

width: 350px;

margin: 100px auto;

padding: 5px 5px;

border: 1px solid #ccc;

}

</style>

10.ElementPlus组件