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:
- Vue family bucket practice (I) - Vue cli
- Vue family bucket practice (II) - iView
- 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()
})