ktsn / vue-router-layout Goto Github PK

View Code? Open in Web Editor NEW

127.0 3.0 16.0 1.55 MB

Lightweight layout resolver for Vue Router

License: MIT License

JavaScript 15.79% TypeScript 84.21%

vuejs vue-router layout component

vue-router-layout's Introduction

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>{{ title }} Foo Layout</h1>
    <router-view/>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    default: 'Hello',
  }
}
</script>

<!-- pages/index.vue -->
<template>
  <p>index.vue</p>
</template>

<script>
export default {
  // Specify the layout by either an object or a string. 
  // The default value is 'default'.
  layout: {
    name: 'foo',
    props: {
      title: 'Hi'
    }
  }
  // or just `layout: 'foo'` if the layout component doesn't have any props.
}
</script>

The following html will be rendered when you access / route:

<div>
  <h1>Hi 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

vue-router-layout's People

Contributors

Stargazers

Watchers

Forkers

cuulee deyangdianzi macula-projects bencelang wovosoft eqxs w2thvhtnu9vyww8 yaquawa xiaoruiguo azurewarth0920 sardor01 sunecosuri wulucxy wwwk ehsan-shv noqcks

vue-router-layout's Issues

Resolve layout option dynamically

How to load the layout dynamically？

How to combine this with Route-Auto

Did not see the relevant tutorial

keep-alive not work

when use vue-router-layout, keep-alive of components not work.

app.vue

<template>
     <div>
        <keep-alive include="home,about" :max="10">
             <router-view />
        </keep-alive>
    </div>
</template>

it can't keep the pages/home.vue and pages/about.vue alive.

home.vue

<template>
     <div>
        home page
    </div>
</template>
<script>
    export default {
        name: 'home'
    }
</script>

add nested: false in vue.config.js, it worked.

When it is ssr, it causes the page to be a js instead of a dom structure.

Bug report] The created hook in page is wrongly called when layout changes in Vue3.

Reproduction repo: https://github.com/Azurewarth0920/created-called-before-routechange

It seems like when changing the layout in the beforeRouteUpdate hook will cause the sub-route component to rerender.

feature request: please support vue-class-component

Please add .d.ts which extends vue-class-componet ComponentOptions to support writing code like this example.

@Component({
  layout: "testlayout",
})
export default class Test extends Vue {

How to sovle Vite dynamic import problem?

|  Vue.use(Router);
6  |  const RouterLayout = createRouterLayout((layout) => {
7  |    return import("@/layouts/" + layout + ".vue");
   |                  ^
8  |  });
9  |  const router = new Router({
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

This plugin works fine with webpack but when I try to switch to vite, this problem happens and I dont know how to resolve it.
Please give me some help, thanks a lot!

transition is not work for router-view in app.vue

When I was using thevue-cli-plugin-auto-routing, which use the vue-router-layout inside. I found that, the transition in app.vue is not working as expected. (the leave transition was missing)

ESM Builder Compatibility

I am using Vue CLI and would like to generate the app as an EMS module, however after connecting and configuring
vue-router-layout i am getting error:

ReferenceError: importScripts is not defined
    i main.mjs:1
    e main.mjs:1
    e main.mjs:1
    e main.mjs:1
    index index.js:2
    extractComponentsGuards vue-router.esm-bundler.js:2010
    navigate vue-router.esm-bundler.js:3089
    promise callback*navigate vue-router.esm-bundler.js:3084
    pushWithRedirect vue-router.esm-bundler.js:2979
    push vue-router.esm-bundler.js:2915
    install vue-router.esm-bundler.js:3329
    use runtime-core.esm-bundler.js:3808
    <anonymous> main.js:22
    433 main.mjs:1
    __webpack_require__ main.mjs:1
    <anonymous> main.mjs:1
[vue-router.esm-bundler.js:3248](webpack://website/node_modules/vue-router/dist/vue-router.esm-bundler.js?ec2d)
[Vue Router warn]: Unexpected error when starting the router: ReferenceError: importScripts is not defined
    i main.mjs:1
    e main.mjs:1
    e main.mjs:1
    e main.mjs:1
    index index.js:2
    extractComponentsGuards vue-router.esm-bundler.js:2010
    navigate vue-router.esm-bundler.js:3089
    promise callback*navigate vue-router.esm-bundler.js:3084
    pushWithRedirect vue-router.esm-bundler.js:2979
    push vue-router.esm-bundler.js:2915
    install vue-router.esm-bundler.js:3329
    use runtime-core.esm-bundler.js:3808
    <anonymous> main.js:22
    433 main.mjs:1
    __webpack_require__ main.mjs:1
    <anonymous> main.mjs:1

vue.config.cjs

module.exports = {
  configureWebpack: {
    target: "webworker",
    output: {
      filename: "[name].mjs",
      chunkFilename: "[name].mjs",
      chunkFormat: "array-push",
      library: {
        type: "module",
      },
    },
    mode: "production",
    entry: "./src/main.js",
    optimization: {
      splitChunks: false,
    },
    experiments: {
      outputModule: true,
    },
  },
  filenameHashing: false,
  pluginOptions: {
    autoRouting: {
      chunkNamePrefix: "page-",
    },
  },
};

babel.config.cjs

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
};

src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import routes from "vue-auto-routing";
import { createRouterLayout } from "vue-router-layout";

const RouterLayout = createRouterLayout((layout) => {
  return import("@/layouts/" + layout + ".vue");
});

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: "/",
      component: RouterLayout,
      children: routes,
    },
  ],
});

export default router;

src/main.js

import { createApp, h } from "vue";
import App from "@/App.vue";
import router from "@/router";

const app = createApp({
  render() {
    return h(App);
  },
});

app.use(router);

app.mount("#app");

Defining the layout via an object errors out

In my home page I have specified a specific layout to use as such:

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  layout: {
    name: 'public',
    props: {
      pageTitle: 'Search',
    },
  },
  components: {
    HelloWorld
  }
}
</script>

This results in no page rendered and this error in the console:

Uncaught (in promise) Error: Cannot find module './[object Object].vue'
    at eval (eval at ./src/layouts lazy recursive ^\.\/.*\.vue$ (app.js:1053), <anonymous>:15:12)

However, specifying the layout using a string works fine:

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  layout: 'public',
  components: {
    HelloWorld
  }
}
</script>

I'd really like to be able to pass props. Any ideas? Thanks!

The lifecycle function that enters the page for the first time is executed twice.

When jumping from one page (without a layout file) to another page (with a layout file), the lifecycle function that enters the page for the first time is executed twice.

[Feature Request/Question] Support of Composition API and <script setup>

Is there currently any support (planned) for Vue 3's Composition API or/and the <script setup> to specify which layout to load?

One could use a second <script> tag with the <script setup> but it looks ugly for a single option https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script