vue3 使用setup语法糖之后设置页面name方法

目录

vue2的设置方法

vue3的设置方法

1.vue3兼容vue2的写法

2.vue3没有使用setup语法糖

3.vue3的setup会自动生成name

4.使用插件

---

设置name的用处：页面缓存需要识别页面的唯一name属性才可以缓存

vue2的设置方法

 <script>
   export default {
     name: "index_view"
   }
 </script>

vue3的设置方法

1.vue3兼容vue2的写法

单独创建一个script标签来设置name，这种方法比较浪费，单独设置name加一个标签

 <script>
   export default {
     name: "index_view"
   }
 </script>

<script setup lang="ts">
// 这里不能直接设置name属性
</script>

2.vue3没有使用setup语法糖

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name:"",
    data(){
       return {}
    }
})

3.vue3的setup会自动生成name

如果项目里面有重复的文件夹名称就会出现重复的name，就会导致缓存错误

name就是当前页面的文件夹名称

index.vue 页面的 name就是index

4.使用插件

yarn add unplugin-vue-setup-extend-plus

pnpm add unplugin-vue-setup-extend-plus

// 如果你使用了ts，则需要设置这个
// tsconfig.json文件中
{
	"compilerOptions":{
		"types": [
            "unplugin-vue-define-options/macros-global"
        ]
	}
}

// vue.config.js 页面
module.exports = defineConfig({
  configureWebpack: {
    plugins: [require('unplugin-vue-setup-extend-plus/webpack').default()],
  }
})

name属性自定义页面名称 

<script setup lang="ts" name="EmolumentSalesmanView">
//内容
</script>