企业官网建设流程全解析

export default

export default 是默认导出，一个vue文件只能有一个export default。

export default示例

<script>exportdefault{name:'TutorialChapterView',data(){return{tutorial:null,chapters:[],activeChapterId:null,activeChapter:null}},asyncmounted(){consttutorialId=this.$route.params.tutorialId},methods:{asyncfetchTutorial(tutorialId){try{constresponse=awaitfetch(`/mysite/api/tutorial/${tutorialId}`,{method:'GET',headers:{'Content-Type':'application/json',}})constdata=awaitresponse.json()if(data.success){this.tutorial=data.data}}catch(error){console.error('Failed to fetch tutorial:',error)}}},watch:{'$route'(to,from){if(to.params.tutorialId!==from.params.tutorialId){this.tutorial=nullthis.chapters=[]this.activeChapterId=nullthis.activeChapter=nullconsttutorialId=to.params.tutorialIdif(tutorialId){this.fetchTutorial(tutorialId)this.fetchChapters(tutorialId)}}}}}</script>

setup和export default的区别

setup更优雅，更推荐。

setup有以下优点：
1、无需exportdefault：中顶层声明的变量、函数会自动暴露给模板，无需手动return。
2、响应式数据改造：原来的data属性全部改为ref()，在JS逻辑中读写它们必须加上.value（在模板中则不需要）。
3、生命周期钩子：mounted被替换为onMounted，且需要从vue中显式导入。
4、路由监听：Vue3推荐使用watch函数监听特定的响应式值（如()=>route.params.tutorialId），这比Vue2中监听整个$route对象性能更好、意图更明确。

export default导出或setup设置后路由才可使使用对吧?

这样理解比较片面。
默认导出并不是路由的规则，而是es6的规则，路由只是用到了导入。