# Layout

Layout is the outermost frame structure of the page and usually includes navigation, sidebars, breadcrumbs and main content. Below image is the basic layout

@ is webpack's alias and point to resource/js, this alias can be changed in webpack.config.js.

    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': path.join(__dirname, '/resources/js'),
    },

Most of the pages in laravue extend from <layout>, except special pages such as: login, 401 , etc... You can have multiple layout in the project - just create a layout with placeholder <app-main>

//No layout
{
  path: '/401',
  component: () => import('@views/ErrorPage/401'),
}

//Has layout
{
  path: '/documentation',
  // You can choose different layout components - remember to import Layout first
  component: Layout,
  // Here the route is displayed in app-main
  children: [{
    path: 'index',
    component: () => import('documentation/index'),
    name: 'documentation',
  }]
}

Laravue uses vue-router routing nesting, therefore adding or modifying a page will only affect the main body of <app-main>. Other parts of layout such as <navbar>, <sidebar>, <tags-view> won't be affected.

/foo                                  /bar
+------------------+                  +-----------------+
| layout           |                  | layout          |
| +--------------+ |                  | +-------------+ |
| | foo.vue      | |  +------------>  | | bar.vue     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

This describes how vue-router works in general.

If you don't get familiar with vue-router, Please refer to official document for more details

# app-main

<app-main> uses <router-view> to render the content which is returned from the main component registering in route item. <router-view> is put inside <keep-alive> in order to be cacheable. Please check router and navigration for more details.

The transition defines the switching animation between pages, you can modify the transition animation according to your own needs.

# router-view

Different routers for the the same vue component.

There are many situations like:

    { path: 'create', component: () => import('@/views/ArticleForm') },
    { path: 'edit/:id(\\d+)', component: () => import('@/views/ArticleForm') },

Same component is used to create pages and edit pages. By default, when switching those 2 pages, it will not trigger the created or mounted hooks of Vue. You can do this by watching the $route (see official document). But it is not too useful in the real scenario, hard to micro-manage, and easy to cause troubles. We can bypass this behavior by adding a unique key to the router-view to ensure that the routing hooks are re-rendered when the route is switched. This is much simpler.

<router-view :key="key"></router-view>

computed: {
  key() {
    // Or :key="route.fullPath" Just make sure the key is the unique
    return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
  }
 }

<!-- Create.vue -->
<template>
  <article-detail :is-edit='false'></article-detail> //create
</template>
<script>
  import ArticleDetail from './components/ArticleDetail'
</script>

<!-- Edit.vue -->
<template>
   <article-detail :is-edit='true'></article-detail> //edit
</template>
<script>
  import ArticleDetail from './components/ArticleDetail'
</script>

# Mobile

The element-ui is officially designed for a desktop-side UI library, and for the complex project like enterprise backend application, it is impossible to meet the user experiences in both desktop and mobile. In this project, we are trying to make it works on mobile with the simple responsive layout. You can modify for your mobile version.