Routing function in Vue3: implementing routing jumps for SPA applications

Vue3 is one of the most popular JavaScript frameworks currently, and in recent updates, Vue3 has introduced some very useful new features, one of which is more powerful routing capabilities.

There are some differences between the routing function of Vue3 and Vue2, so we need to review the routing of Vue2 before learning the routing function of Vue3.

Routing in Vue2 is implemented by using Vue Router. First, we need to install Vue Router in the project and then configure it in the Vue instance. For a simple routing system, we only need to specify each path and its corresponding component:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

In the above code, we create a Vue Router instance that contains two routes: '/' and '/about'. When users visit these URLs, Vue Router will render the corresponding components.

The main change in routing in Vue3 is to simplify the use of routing functions by using a new API. Next, we will introduce the routing function in Vue3 in detail.

Create Vue3 routing

First, we need to install Vue Router 4:

npm install vue-router@4

Then, we need to import Vue Router in the Vue application and create a Vue Router instance:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

Note that unlike Vue2’s routing, we now use the createRouter() function to create routes instead of new Router().

The main change in routing in Vue3 is that the routing function adopts a more declarative approach. We use the createWebHistory() function to specify the use of HTML5 history mode. This is a relatively new technology that allows us to update the page URL more safely without reloading the entire page.

Define routing

The way to define routing is the same as Vue2. We can define routes using the routes array. Each route consists of a path and a corresponding component.

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

Route parameters

Using route parameters, we can make the URL have variable values. For example, we can configure the following route and URL:

const routes = [
  { path: '/user/:id', component: User }
]

This will make the :id part of the URL a parameter that can accept any string value, for example:

/user/1
/user/abc
/user/123abc

We can Use $route.params in the component to access routing parameters. For example:

export default {
  name: 'User',
  created() {
    console.log(this.$route.params.id)
  }
}

This will output the route parameters every time the component is created.

Named routing

We can name the route when defining it. This is useful for certain route navigation methods, for example:

const routes = [
  { path: '/', component: Home, name: 'home' },
  { path: '/about', component: About, name: 'about' },
  { path: '/user/:id', component: User, name: 'user' }
]

Define a named route, which we can access through the $name attribute.

router.push({ name: 'user', params: { id: 123 }})

This will jump to the User component with the parameter id.

Route Navigation

We can use the following methods to navigate to another route:

// 带路径的导航
router.push('/about')

// 带命名的导航
router.push({ name: 'user', params: { id: 123 }})

// 重定向到另一个路由
router.replace('/about')

When we use routing in a component, we can use the $route object to access the current route information.

export default {
  name: 'About',
  created() {
    console.log(this.$route.path)
  }
}

Route Guard

Route guard is a mechanism to inspect navigation, allowing us to execute code before or after intercepting all routes. In Vue3, we can use the following route guard:

const router = createRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  // 在此处添加路由守卫代码
  next()
})

In the beforeEach guard, we can check whether the user is logged in or make the user complete the necessary actions to continue the navigation.

Summary

Vue3 has some major improvements in routing, making it easier to use than Vue2. It takes a more declarative approach, making it easier to define and use routes. In addition, Vue3 also introduces HTML5 history mode, which makes routing more secure and usable.

Using Vue3's routing function can help you create your own SPA application, and you can easily jump and navigate.

The above is the detailed content of Routing function in Vue3: implementing routing jumps for SPA applications. For more information, please follow other related articles on the PHP Chinese website!