Vue family bucket practice (4) --- Vue router

Keywords: Vue axios Attribute

Recently, the company wants to rewrite the operation management system. It doesn't want to maintain the previous backbone anymore. It needs to rewrite the whole front-end quickly. It took more than two weeks to re open the new pit, and the first edition was published. It was a great harvest. In practice, learning is always the most efficient. Take advantage of the heat to record and summarize what you have learned, and then sort out the ideas at the front end.

Related blogs:

  1. Vue family bucket practice (I) - Vue cli
  2. Vue family bucket practice (II) - iView
  3. Vue family bucket practice (III) - axios

Vue-router

reference material: File

vue router is an official recommended plug-in necessary for vue to write spa. It's easy to use. You can start quickly by looking at the documents. The basic usage will not be described in detail. Here we record something worth remembering.

Transition animation effect

Directly wrap it with the < transition > label of vue:

<transition :name="transitionName">
  <router-view></router-view>
</transition>

// Then in the parent component
// watch $route decides which transition to use
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

Use of routing hooks

Vue router has hooks, in which many common operations can be added, such as: 1. Modify the title of the page after jump; 2. Cooperate with the loading bar component of iview; 3. Set the scroll bar after jump, etc.

// router/routes.js
// stay router Internal setting mate Of title attribute
const routes = [
  {
    // The welcome page after login is now customer management
    path: '/welcome',
    name: 'welcome',
    component: customerManagement,
    meta: {
      title: 'Selling the family--home page'
    }
  }
]
// router/index.js
// Routing hook, do some jump configuration
router.beforeEach((to, from, next) => {
  // Modify the page according to the settings title
  window.document.title = to.meta.title
  // LoadingBar
  // Except for the landing page, there will be Loadingbar
  if (to.name !== 'Login') {
    iView.LoadingBar.start()
  }
  next()
})

router.afterEach(route => {
  // Scroll to the top after jump, not necessary at present
  // window.scrollTo(0, 0)
  // LoadingBar
  // No to login page loadingbar´╝îreach404It's red loadingbar
  if (route.name === 'Login') {
    return
  }
  if (route.name === '404') {
    iView.LoadingBar.error()
    return
  }
  iView.LoadingBar.finish()
})

Posted by BigTime on Fri, 01 May 2020 09:11:50 -0700