1. Preface

This article mainly talks about the common APIs that need to be used in the development process. Some APIs are not commonly used. You can find the documents when you need them. Because there is no this in V3, the syntax of router4 has been modified. We can still access $router and $route in the template, so we don't need to return router or route in setup

Vue router4.0 official website

1，Router

This section mainly introduces the modification of common jump methods

2.1, jump

import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
	name: 'Home',
	setup() {
		const Router = useRouter()
		const to = function() {
			Router.push({
				name: 'About',
				params: {
					id: 999
				}
			})
		}
		onMounted(() => {
			console.log(Router)
		})
		return {
			to
		}
	}
}

2.2, open a new page

import { useRouter } from 'vue-router'

export default {
	name: 'Home',
	setup() {
		const Router = useRouter()
		const toBlank = function() {
			const Path = Router.resolve({
					name: 'About',
					query: {
						id: '123'
					}
			})
			window.open(Path.href, '_blank')
		}
		return {
			toBlank
		}
	}
}

3，Route

Here we mainly talk about how to get the value passed by the route

Routing value

import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
	name: 'Home',
	setup() {
		const Route = useRoute()
		onMounted(() => {
			console.log('onMounted')
			console.log(Route.params.id)
			console.log(Route.meta)
		})
	}
}

4. Guard

4.1，onBeforeRouteLeave

It can replace the guard in the component. The new combined Api is triggered when leaving the current page route. return false prevents the jump

import { onBeforeRouteLeave } from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      if (to.name !== 'home') {
          return false
      }
    })
  }
}

4.2，onBeforeRouteUpdate

The new combined Api is triggered when the route is updated

import { onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      if (to.params.id !== from.params.id) {
        console.log('......')
      }
    })
  }
}

4.3, routing guard syntax

// Original writing
Router.beforeEach((to, from, next) => {
  if (ok) {
    next()
  } else {
    next(false)
  }
})

// neographism
Router.beforeEach((to, from) => {
    if (ok) {
        console.log('...')
    } else {
        return false
    }
})

5. Important changes

• Replace new Router() with createRouter

• mode: 'history' option is replaced with a more flexible name history

• Remove the base option and modify it to pass the first parameter of methods such as createWebHistory

• transition and keep alive must be placed in router view

• Delete the event, append and tag attributes in < router link >

• The router.onReady() function has been replaced by router. Isread()

• Delete router.match and change to router.resolve

• All navigation is now asynchronous. If you use transition, you need to wait for the route to be ready before you mount the program

• Named sub routes with empty path s no longer add slashes

If you find it helpful, I'm @ pengduoduo. Welcome to praise and pay attention to comments; END

PS: press F12 on this page, and enter document.querySelectorAll('.diggit')[0].click() in the console. What a surprise

official account

Previous articles

• Vue3 tutorial to help you get started
• VueX4 tutorial to help you get started with Vue3 family bucket
• Use nvm to manage node.js version and replace npm Taobao image source
• Super detailed! Vue router handle tutorial
• The. env file is used in vue to store global environment variables and configure vue startup and packaging commands
• Wechat applet realizes search keyword highlighting
• Super detailed! Vue's nine communication modes
• Super detailed! Vuex handle tutorial

Personal home page

• CSDN
• GitHub
• Jian Shu
• Blog Garden
• Nuggets