This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Keep tabs – alive

If you don’t want to reload every time you switch tabs, wrap it with keep-alive.

Element FAQ: 1. All element native events must be added with the.native modifier. 2. Modify the Element style. If you want to overwrite an element’s style in views, you can’t use scoped. If you don’t use scoped, it will affect the style of other pages. You need to add a class to the parent and use the namespace to solve this problem.

Multirouting a component can be distinguished by meta. For example, if viewing and editing share a component, this can be distinguished. This.$route.meta. IsEdit can obtain meta data, and then the corresponding processing line.

meta: { title: 'profile'.icon: 'user'.isEdit: true }

computed: {
  isEdit() {
    return this.$route.meta.isEdit // According to the meta judgment}},created() {
  if (this.isEdit) { 
    this.fetchData(); }}Copy the code

Then to learn the layout of the project, the top navigation bar Navbar, the left navigation bar Sidebar, navigation TagsView, page to introduce this layout in the level one routing configuration can be.

import Layout from '@/layout'
path: '/profile'.component: Layout,
Copy the code

Because the vue-router is used for routing nesting, the modification of the page will only affect the app-main area, but the navigation bar area is not affected.

App – the main in @ / layout/components/AppMain first see the layout,

From vuex, these parameters are extracted. And then I find out that these parameters are taken from at sign/Settings,

Find a setting down, configuration, according to the various parts of the layout are (for the backend, was forced to write the front-end approach to the front, the first time I saw such loading configuration.. Before has been hardcode, grateful heart, hereafter write like this)

    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />

Copy the code

Modify state in VUEX to realize the function of turning off the sidebar when mobile terminal.

<div :class="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<tags-view v-if="needTagsView" />
Copy the code

Add classes dynamically, and display tags-view,right-panel, js using mapState from VUex state,classObj configuration style, and then a bunch of CSS.

Now that the index page is over, it’s time to learn the details of the components used in the index page.