Vue Router 动态路由
在Vue Router中，动态路由是指路由的path属性中可以包含动态片段，这些动态片段以冒号":“开始。在Vue Router中，可以通过两种方式使用动态路由参数：
- 在路由定义时使用动态片段。
- 在导航守卫中根据条件动态添加参数。
例如，如果你想要一个用户个人信息页面，其中用户ID是动态的，你可以这样定义路由：
const router = new VueRouter({
routes: [
// 动态路由参数以冒号":“开始
{ path: '/user/:id', component: User }
]
})在组件内部，你可以通过this.$route.params.id来获取到这个动态片段的值。
如果你想要在导航守卫中根据条件动态添加参数，你可以这样做：
router.beforeEach((to, from, next) => {
// 如果用户未登录，并且试图访问非登录页面，则重定向到登录页面
if (!isUserLoggedIn() && to.path !== '/login') {
next('/login');
} else {
next(); // 继续导航
}
})在这个例子中，如果用户没有登录并且尝试访问一个非登录页面，则会被重定向到登录页面。这里的to.path是即将访问的路径，可以用来判断是否需要动态添加参数。
评论已关闭