VUE framework: comprehensive detail summary of vue2 to vue3 (6) dynamic routing

Hello everyone, I am the blogger of csdn: lqj_ myself

This is my personal blog homepage:

 lqj_I_Python artificial intelligence vision (opencv) from entry to actual combat, front end, WeChat applet - CSDN Blog

The latest uniapp graduation design column is also placed below:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

Usually, I will also explain some things that you usually use in the Bilibili video,

Welcome to Bilibili:

Lu Miaoer's personal space-Lu Miaoer's personal homepage-哔哩哔哩Video

dynamic routing

add route

Adding routes is very useful when we are doing user permissions. router.addRoute()A route can be added using :

router.addRoute({ path: '/about', name: 'about', component: About })

Note: Unlike the previous version, routes can only be added one by one, not in batches.

delete route

Routes can be deleted in the following ways:

1. router.removeRoute()Delete a route by name by using:

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

2. Replace the previous route by adding a route with the same name:

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

3. By calling router.addRoute()the callback function returned by:

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

This method is useful when the route does not have a name.

Add nested routes

To add a nested route to an existing one, pass the route's nameas the first argument to router.addRoute(), which has childrenthe same effect as adding via:

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// 添加嵌套路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })

This is equivalent to:

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }]
})

Guess you like

Origin blog.csdn.net/lbcyllqj/article/details/132134399