Anything you want to protect, you draw your sword

preface

1 router

The constructor

VueRouter

Import VueRouter from 'vue-router' // Error: Redirected when going from "/login" to "/home" // via a navigation guard const originalPush = vuerouter.prototype.push VueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) { return originalPush.call(this, location, onResolve, onReject) } return originalPush.call(this, location).catch(err => err) } const router = new VueRouter({ routes })Copy the code

attribute

options

Router. options = {routes: [route]}Copy the code

methods

beforeEach

Router. BeforeEach ((to, from, next) => {// If there is no login, jump to the login page if (! Token) {next('/login')} Jump results page const reportRoute = the router. The options. Routes. The find (route = > the route. The name = = = 'Report') if (to.. name = = = 'Test' && ReportRoute. Meta. HasReport) {next ('/report ')} / / next must perform, cannot jump / / String parameters, otherwise the path / / parameter as an object, {path, name? Params? , query? } // false to prevent jump next()})Copy the code

2 routes

Synchronous routing

import Home from '@views/Home.vue' import About from '@views/About.vue' import NotFount from '@views/NotFount.vue' const Routes = [{path: '/', redirect: '/home', {path: '/home', name: 'home', Component: home}, {path: '/home', component: home}, {path: '/home', component: home}, {path: '/home', component: home}, {path: '/home', component: home}, {path: '/home', component: home}, {path: Name: 'about', Component: about}, {path: '*', // NotFount page name:' about', Component: about}, {path: '*' 'NotFount', component: NotFount } }Copy the code

Asynchronous routing

const routes = [ ... { path: '/home', name: 'Home', component: () => import('@views/Home.vue') }, { path: Name: 'about', Component: Import (/* webpackChunkName: "about" */ '@views/ about.vue '),},...}Copy the code

Dynamic routing

Const routes = [... {path: '/product/:id', // param pass name: 'product ', component: () => import('@views/ product.vue '), // uncoupling this.$route.params.id // uncoupling props: Route => ({...route.params})}...} // Route to this.route.push ({path: 'product/123' }) this.router.push({ name: 'Product' params: { id: 123 } })Copy the code

Zi lu by

const routes = [ ... { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "About" */ '@views/ about.vue '), children: [{path: ', // default to profile subpage redirect: 'profile'}, {// Relative path // use path: '/about/profile' jump path: 'profile', name: 'profile', Component: () => import(/* webpackChunkName: "about" */ '.@views/ profile.vue ')}, {// webpackChunkName: "about" */ '.@views/ profile.vue ')} '/posts', name: 'Posts', component: () => import(/* webpackChunkName: "about" */ '@views/Posts.vue') } ] } ... ]Copy the code

3.route

General properties

{// Redirect route path: '/home', // route name name: 'home', // Path-mapping component: home}Copy the code

redirect

{... // Default to path: '/', // redirect to Home page: '/ Home '... }Copy the code

The routing of decoupling

{... $route.params.id = // props: ['id'].props: route => ({... route.params}) ... }Copy the code

Routing yuan

{... Meta: {keepAlive: true, Auth: true, breadcrums: [' home ', 'about ',' personal '], hasToReport: false}... }Copy the code

Routing to intercept

{ path: '/report', name: 'Report', component: () => import(/* webpackChunkName: "about" */ '.. /views/Report.vue'), meta: { hasToReport: false }, beforeEnter: (to, from, next) => { to.meta.hasToReport = true next() } }Copy the code

4. Pay attention to

2. After decoupling the props, params must be used to pass parameter 3 for dynamic routes. Permissions involve redirect blocking and are handled in beforeEach. 4. Redirect can be used with functions

The end of the

There are a lot of people, hold on to me, I don’t want to lose you ~

Good night ^_^

Refer to the link

  • Vue – the router documentation
  • Route hop error

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to
  • So, how about a VUE plugin (15) every day — Vue-Content-Placeholder
  • Learn a vUE plugin every day (16) – VUe-video-player
  • Learn a vue plugin every day (17) — js-file-download
  • Learn a VUE plugin (18) every day — JS-Audio-Recorder
  • Learn a VUE plugin (19) every day – VUe-TreesELECT
  • Learn a VUE plug-in (20) — ProgressBar every day
  • Learn a VUE plugin every day (21) – ProvidePlugin