当前位置: 首页 > Web前端 > HTML5

vue命名视图

时间:2023-04-05 21:34:09 HTML5

在视图中创建UserProfile.vueUserProfilePreview.vue文件app.vue文件创建两个路由器视图:两个router-linksHome|profile|inrouter.jsimportVuefrom'vue'importRouterfrom'vue-router'importHomefrom'./views/Home.vue'从'./views/UserProfile.vue'导入UserProfile从'./views/UserProfilePreview.vue'导入UserProfilePreviewVue.use(Router)exportdefaultnewRouter({mode:'history',基础:process.env.BASE_URL,路由:[{路径:'/',名称:'home',组件:主页},{路径:'/profile',名称:'profile',组件:{默认:UserProfile,helper:UserProfilePreview}}]})在浏览器窗口访问我们的命名视图时,分别显示对应的组件总结:命名视图的优点是等价的到一页中的多个窗口。我们可以根据Home|profile|的no来使用这些窗口展示不同的观点