Dynamic addition and deletion methods of routes in uniapp

Uniapp is a cross-end framework based on Vue.js. It supports one-time writing and generates multi-end applications such as H5, small programs, and APPs at the same time. It also pays great attention to performance and development during the development process. efficiency. In Uniapp, the dynamic addition and deletion of routes is a problem that is often encountered during the development process. Therefore, this article will introduce the dynamic addition and deletion of routes in Uniapp and provide specific code examples.

1. Dynamic addition of routes

Dynamic addition of routes can add new routes to the routing table when the page is loaded or after user operation according to actual needs. In Uniapp, dynamically adding routes can be achieved through the router.addRoutes() method. The specific code is as follows:

//获取路由对象
let router = this.$router

//新增路由
let routes = [{
  path: '/newPage',
  name: 'newPage',
  component: r => require.ensure([], () => r(require('@/pages/newPage/index')), 'newPage')
}]
router.addRoutes(routes)

In the above code, the routing table in the current project is obtained by obtaining the routing object, and then defining a New route object and add it to the routing table. Among them, the format of a new route is similar to that of an ordinary route definition. You only need to specify the path, name and component of the route. In this code example, we added a new route named newPage to the routing table, and its corresponding page is newPage.

2. Dynamic deletion of routes

Dynamic deletion of routes can remove a route from the routing table after the user performs an operation or at a specific point in time to prevent it from being accessed. In Uniapp, dynamic deletion of routes can be achieved through the router.removeRoute() method. The specific code is as follows:

//获取路由对象
let router = this.$router

//删除路由
let route = router.match('/newPage')
if (route) {
  router.removeRoute(route)
}

In the above code, we first obtain the routing object, and then use the router.match() method to match the route For the newly added route newPage in the table, if the match is successful, use the router.removeRoute() method to remove the route from the routing table. It should be noted that when using the router.match() method to match a route, you need to ensure that the route already exists. Otherwise, failure to match will cause a program error.

3. Summary

Through the introduction of this article, we have learned about the dynamic addition and deletion methods of routes in Uniapp, as well as related code examples. In the actual development process, these methods can be flexibly used according to project needs and actual conditions to achieve richer and more flexible routing processing functions and improve development efficiency and user experience.

The above is the detailed content of Dynamic addition and deletion methods of routes in uniapp. For more information, please follow other related articles on the PHP Chinese website!