ktsn / Vue Router Layout
Licence: mit
Lightweight layout resolver for Vue Router
Stars: ✭ 74
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Vue Router Layout
Autoresponsive Vue
Auto responsive grid layout library for Vue.
Stars: ✭ 132 (+78.38%)
Mutual labels: layout, component
Autoresponsive React
Auto Responsive Layout Library For React
Stars: ✭ 1,475 (+1893.24%)
Mutual labels: layout, component
Vue Autonumeric
A Vue.js component that wraps the awesome autoNumeric input formatter library
Stars: ✭ 68 (-8.11%)
Mutual labels: component
Config
Configure a system using EDN files and clojure.spec
Stars: ✭ 72 (-2.7%)
Mutual labels: component
Vue Studymaps
使用 Vue.js 开发的聚合应用。通过爬虫抓取平时浏览的网站,省去逐个点开网页的时间。
Stars: ✭ 71 (-4.05%)
Mutual labels: vue-router
Security Guard
The Guard component brings many layers of authentication together, making it much easier to create complex authentication systems where you have total control.
Stars: ✭ 1,157 (+1463.51%)
Mutual labels: component
Vue Awesome Template
☀基于[email protected]的[email protected] 项目模板;集成各种常用组件、轮子、最佳实践;
Stars: ✭ 70 (-5.41%)
Mutual labels: vue-router
Http Client
The HttpClient component provides powerful methods to fetch HTTP resources synchronously or asynchronously.
Stars: ✭ 1,186 (+1502.7%)
Mutual labels: component
Rn Collapsing Tab Bar
Collapsing header with tabs for react native
Stars: ✭ 71 (-4.05%)
Mutual labels: component
Dji Hardware Schematics
Community made schematics for the DJI drones and devices.
Stars: ✭ 72 (-2.7%)
Mutual labels: layout
Utils
🛠 Lightweight utilities for string & array manipulation, image handling, safe JSON encoding/decoding, validation, slug or strong password generating etc.
Stars: ✭ 1,158 (+1464.86%)
Mutual labels: component
Prelodr
A simple Material preloader inspired by Google Inbox.
Stars: ✭ 68 (-8.11%)
Mutual labels: component
React Frame Component
Render your React app to an iFrame
Stars: ✭ 1,163 (+1471.62%)
Mutual labels: component
vue-router-layout
Lightweight layout resolver for Vue Router.
You may want to use vue-cli-plugin-auto-routing which includes all useful features on routing.
Installation
$ npm install vue-router-layout
Supported Vue Version
0.2.0 or newer only supports Vue >= 3.0.0. If you want to use vue-router-layout with Vue v2, try 0.1.x.
Overview
Create <RouterLayout>
component by passing a callback which resolves layout component to createRouterLayout
. The callback will receives a string of layout type and expect returning a promise resolves a layout component.
import { createRouterLayout } from 'vue-router-layout'
// Create <RouterLayout> component.
const RouterLayout = createRouterLayout(layout => {
// Resolves a layout component with layout type string.
return import('@/layouts/' + layout + '.vue')
})
Pass <RouterLayout>
to Vue Router's routes
option with some children components.
import { createRouter, createWebHistory } from 'vue-router'
import { createRouterLayout } from 'vue-router-layout'
// Create <RouterLayout> component.
const RouterLayout = createRouterLayout(layout => {
// Resolves a layout component with layout type string.
return import('@/layouts/' + layout + '.vue')
})
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
// Pass <RouterLayout> as the route component
component: RouterLayout,
// All child components will be applied with corresponding layout component
children: [
{
path: '',
component: () => import('@/pages/index.vue')
}
]
}
]
})
With the above router, if you have layouts/foo.vue
and pages/index.vue
like the following:
<!-- layouts/foo.vue -->
<template>
<div>
<h1>Foo Layout</h1>
<router-view/>
</div>
</template>
<!-- pages/index.vue -->
<template>
<p>index.vue</p>
</template>
<script>
export default {
// You can specify layout component name here (default value is 'default')
layout: 'foo'
}
</script>
The following html will be rendered when you access /
route:
<div>
<h1>Foo Layout</h1>
<p>index.vue</p>
</div>
Related Projects
- vue-cli-plugin-auto-routing: Vue CLI plugin including auto pages and layouts resolution.
- vue-auto-routing: Generate Vue Router routing automatically.
- vue-route-generator: Low-level utility generating routing (used by vue-auto-routing under the hood).
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].