Vue动态路由

r囧r小猫 2022-08-31 11:04 193阅读 0赞

### Vue动态路由 ###

*  1、添加路由
 *  2、在导航守卫中添加路由
 *  3、删除路由
 *   *  3.1 通过添加名称冲突的路由。
     *  3.2 通过调用router.addRoute()函数返回的回调。
     *  3.3 通过调用router.removeRoute()函数按名称删除一个路由。
 *  4、添加嵌套路由
 *  5、查看现有路由

向路由器添加路由通常是通过routes选项完成的，但是在某些情况下，我们可能希望在应用程序已经运行时添加或删除路由，也就是以编程的方式添加或删除路由。

# 1、添加路由 #

动态路由主要通过两个方法来实现：`router.addRoute()`和`router.removeRoute()`。`router.addRoute()`方法只是注册一个新的路由，如果新注册的路由与当前位置匹配，则需要使用`router.push()`函数或`router.replate()`函数手动导航以显示新路由。  
  在下面的代码中，只定义了一个单一的路由：

const router=createRouter({ 
    	history:createWebHistory(),
    	routes:[{ 
    		path:'/:acticleName',
    		component:Article
    	}],
    })

转到任何页面，如/about、/store,都将渲染Article组件。如果在/about上想显示一个新路由，那么仅仅编写下面的代码是不够的

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

路由到/about页面，仍将显示Article组件。要显示About组件，我们需要手动调用`router.replate()`函数改变当前位置并覆盖之前的位置。代码如下所示：

router.addRoute({ 
    	path:'/about',
    	component:About
    })
    //也可以使用this.$route或route=useRoute()(在setup函数中)
    router.replace(router.currentRoute.value.fullPath)

如果需要等待新路由显示，则可以调用`await.router.replace()`

# 2、在导航守卫中添加路由 #

在导航守卫中添加或删除路由，不要调用`router.replace()`函数，而是通过返回新的位置来触发重定向。代码如下所示：

router.beforeEach(to=>{ 
    	if(!hasNecessaryRoute(to)){ 
    		router.addRoute(generateRoute(to))
    		//出发重定向
    		return to.fullPath
    	}
    })

上面的示例假设两件事：首先，新添加的路由记录将匹配到目标位置，这实际上导致了与我们尝试访问的位置不同；其次，`hasNecessaryRoute()`函数在添加新路由后返回`false`,以避免无线重定向。  
  因为我们进行了重定向，所以替换了正在进行的导航守卫，其行为与前面的示例类似。在实际场景中，添加更有可能发生在导航守卫之外。例如，当一个视图组件挂在时，它会注册新的路由。

# 3、删除路由 #

有几种不同的方式可以删除现有的路由。

## 3.1 通过添加名称冲突的路由。 ##

如果添加了一个与现有路由同名的路由，那么会先删除该路由，然后再添加路由。代码如下所示：

router.addRoute({ 
    	path:'/about',
    	name:'about',
    	component:About
    })
    //这将删除先前添加的路由，因为它们具有相同的名称且名称是唯一的
    router.addRoute({ 
    	path:'/other',
    	name:'about',
    	component:Other
    })

## 3.2 通过调用router.addRoute()函数返回的回调。 ##

const removeRoute=router.addRoute(routeRecord)
    removeRoute()	//如果路由存在，则删除它

这在路由没有名称时非常有用。

## 3.3 通过调用router.removeRoute()函数按名称删除一个路由。 ##

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

**注意**:如果希望使用remoceRoute()函数，但又希望避免名称冲突，可以在路由中使用Symbol作为名称。  
  当一个路由被删除时，它的所有别名和子路由都会被删除。

# 4、添加嵌套路由 #

要想现有路由添加嵌套路由，可将路由的名称作为第一个参数传递给router.addRoute()函数，这将有效地添加路由，就像通过children添加一样。代码如下所示：

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

这相当于：

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

# 5、查看现有路由 #

Vue Router给出了两个查看现有路由的函数:

router.hasRoute:检查路由是否存在。

router.getRoutes():获取包含所有路有记录的数组。