<>1. initialization vue-router
First install vue-router, And create a file named router Folder for , Create a new one under index.js
npm i vue-router
<>2. vue-router Simple configuration of
First introduce vue and vue-router
then vue.use Introduce the plug-in
Create a constant and introduce the page according to some rules , that is .vue file
import Vue from 'vue' import VueRouter from 'vue-router' import home from
'./home.vue' // Introduction component import login from './login.vue' Vue.use(VueRouter) const
routes= [ { path: '/home', component: home }, { path: '/login', component: login
} ] const router = new VueRouter({ // Put constant routes Put it in routes }) // export router export
default router
stay main Or file and new Vue It's done when you put it in , This is the simplest router to configure
<>3. Configure your own requirements router
On the import page / Component time , Components can be introduced on demand , In this way, you won't enter for the first time vue All components will be introduced when the project is completed , The white screen time of the home page is too long, and it will not be packaged into one when packaging js file , When you need to display which component , In introduction .
// Or has the example just been modified const routes = [ { // Enter this route by default every time path: '/', //
redirect attribute , If it is the default route , Then jump redirect: '/home', // Routes can be named , Can pass name Route jump name: '',
// You can save some information in the route , amount to html Inside meta Meta information , You can pass $route To get meta: { }, //
Sub routes shown under this route , Must be written in the component router-view Only labels can be displayed children: [ { path: '', component: '' } ]
}, { path: '/home', //component: home // Import components on demand ,app.js Block packaging component: () =>
import('./home.js) }, { path: '/login', //component: login //
Of course you can component To realize the lazy loading function of routing components component: (resolve) => { require(['./login'],
resolve) }, } ]
<>4.vue-router Public configuration of
const router = new VueRouter({ // This attribute is used to remove url Hash in (/#/) mode: 'history', //
This property is in path Path plus base path base: '/base/', // To the overall situation router-link Attributes used by the write style when activated , linkActiveClass:
'', linkExactActiveClass: '', // Save the scroll position of the entered route scrollBehavior (to, from,
savedPosition) { to // Jump route from // Which route to jump from savedPosition //
If the route has entered and scrolled , This parameter will save the position information of scrolling // We usually set it like this if (savedPosition) { return savedPosition
} }, // Not all browsers support vue Form of route jump , This property does not need to be set to take effect automatically in order to be supported by different browsers vue Form of route jump . fallback:
true, // This method automatically gets the information in the path query parameter , It will receive a parameter that is a string parseQuery (query) { }, //
This method automatically gets the information in the path query parameter , It receives a parameter that is an object stringifyQuery (obj) { } })
<>5. Route cache and route switching animation
In the above, we said router-view label , We can give router-view Write some properties
Cache all routes
stay router-view Outer package keep-alive example ： <keep-alive> <router-view></router-view> </keep-
alive>
Cache specified route
use include <keep-alive include=" Of this route name name "> <router-view></router-view> </keep
-alive> use exclude To specify that the component does not require caching <keep-alive exclude=" Of this route name name "> <router-view></
router-view> </keep-alive>
Partial route cache
use meta Add the following properties to the route meta: {keepAlive: true // cache } meta: {keepAlive:false // No cache
} example ： { path:'/Distribution', name:'Distribution', component: Distribution, meta:
{keepAlive: true // cache } } Then on the page <keep-alive > // Current incoming route meta inside
keepAlive by true Go here when you need it <router-view v-if="$route.meta.keepAlive"></router-view> </
keep-alive> // Current incoming route meta inside keepAlive by false Go here when you need it below if The judgment is reversed <router-view v-
if="!$route.meta.keepAlive"> </router-view>
Routing switching effect
<!-- name Header name for global style , Handoff for each route When you wrap a single component , Can act on the switching effect of a single component --> <transtion name="
swtich"> <router-view></router-view> </transtion>
Then define the switching effects in the global style
/* Gradual in and gradual out effect */ .switch-enter-active, .switch-leave-active transtion: opacity .5s
.switch-enter, .switch-leave-toopacity: 0
Technology