vue应用多模板写法

介绍

一个应用往往不止有一个模板布局。比如，登录页是一种模板，登录后是一种模板。如果应用更加复杂，这时候就体现出来了多模板布局的重要性。

实现方式

在路由设置中将对应组件页面设置成对应模板的子路由就可以达到效果。

router.js

new router({routes: [{path: '/',compontent: () => import('@/layout/default/Index.vue'),children: [{path: '/',compontent: () => import('@/view/Home.vue')   },...]},{path: '/login',compontent: () => import('@/layout/login/Index.vue'),children: [{path: '/login',compontent: () => import('@/view/login/Index.vue')    },...]} ]
})

对应的模板文件（如：@/layout/default/Index.vue文件）

<template>...<router-view /> // 其他的按你的需求写，千万记住要加上这个标签，要不然子路由的内容渲染不出来。...
</template>

效果图

vue应用多模板写法相关推荐

Vue main.js各种写法和含义
Vue main.js各种写法和含义遇到的main.js的三种写法: 第一种: 通过webpack 初始化的项目 // The Vue build version to load with the ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
VSCode自定义代码片段2——.vue文件的模板
.vue文件的模板 {// v'// 2 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义片段名称 => ...
Vue 第一天:模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
Vue 中英文组件样式写法
Vue 中英文组件样式写法 Vue 项目国际化样式处理一.全局(main.js)添加自定义指令: v-lang 会自动添加语言对应的 class [中:zh,英:en] Vue.direct ...
【猿说VUE】初试模板语法，开启VUE编码之旅
模板语法官网描述: Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的 ...
前端开发：VS Code编辑器新建Vue文件自定义模板的方法
在前端开发过程中,尤其是对于经验不足的初级开发者来说,需要掌握一些必备的提升开发速度的技巧,比如使用各种插件来提升开发速度,这样才能事半功倍. 本篇博文来分享一个开发常用的技巧,资深开发者不屑于知道的 ...
vue自适应企业门户模板
vue自适应企业门户模板 1.本地安装步骤前期安装nodejs,vue顺序执行npm installnpm run dev或者npm run serve 企业网站 http://demo.hyxds ...
vscode Vue ts 自定义模板
vscode Vue ts 自定义模板首先打开vscode选择用户片段选择vue.json {// Place your snippets for vue here. Each snippet i ...

vue应用多模板写法

介绍

实现方式

router.js

对应的模板文件（如：@/layout/default/Index.vue文件）

效果图

vue应用多模板写法相关推荐

最新文章

热门文章