vue3动态路由

最新推荐文章于 2025-04-02 20:39:34 发布

酸奶味的核桃

最新推荐文章于 2025-04-02 20:39:34 发布

阅读量340

点赞数

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_58061710/article/details/131953592

版权

vue3 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了在Vue3中如何实现动态路由，包括使用<router-view>和<component>结合keep-alive的include属性来管理缓存组件。同时，讨论了在setup语法糖下设置组件name的两种方法，一是保留传统的<script>标签，二是使用vite-plugin-vue-setup-extend插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. vue3动态路由写法

 <template>
	  <router-view #default="{Component}">
		     <keep-alive :include="keepAliveList">
			      <component :is="Component"></component>
		     </keep-alive>
	  </router-view>
 </template>

<script lang="ts"  setup>
    //pinia中存储的keepAliveList列表. 内部存储着路由组件的name属性
   import   {useUser}   from   "@/store/usekeepAlive"
   import   {computed}   from "vue"
   const    userStore =  useUser()

    //需要缓存组件的列表
   const  keepAliveList =  computed(()=>{
     return   userStore.keepAliveList
  })
</script>

2. 添加组件的name

keep-alive的include列表中是需要与组件的name属性对应才能缓存, 如果使用vue3的setup语法糖格式, 则一下两种方式

方法一: 两个script标签, 其中一个写成vue2的形式, 专门用来写name
方法二: 使用vite插件vite-plugin-vue-setup-extend

方法1:
<script>
   export  default  {
      name:"组件名"
   }
</script>
<script lang="ts"  setup>

</script>

方法2:
//安装
npm i vite-plugin-vue-setup-extend@0.4.0 -D
//配置vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

//使用
<script lang="ts"   setup   name="from">
</script>