vue中的动态组建和路由如何选择

在项目搭建之初,最烦人的操作,恐怕就是考虑组建(页面)的之间的跳转问题了。

那么要不要使用动态组建,或者什么时候使用动态组建最为合适呢?

首先来看一下动态组建与路由跳转之间的区别:
1、两者都可以实现页面之间的跳转,但动态组建是不可以改变URL的,一般多用于某个页面中的tab切换,
而且它相对路由跳转还有个优点,就是可以利用 `<keep-alive></keep-alive>` 标签来保证此组建不被销毁,
一般多用于性能的优化上。
缺点:数据的耦合性很高,需要做统一的管理
2、路由来实现页面的跳转,一般多用于模块之间。比如在后台管理项目中用的最多的就是:用户管理可以配置一个路由、管
理员权限可以配置一个路由、商品管理页面可以配置一个路由.....,对于某个模块中的子模块,同样也可以使用路由的子路
由(一般是`children`属性)来设置
优点:数据的耦合性很低,便于开发
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态路由是指在Vue Router,可以根据不同的参数值动态生成路由路径。通过动态路由,我们可以根据不同的参数值加载不同的组件或页面。在Vue Router,我们可以使用冒号(:)来定义动态路由参数。例如,我们可以定义一个动态路由路径为`/user/:id`,其`:id`表示一个动态的参数值。当用户访问`/user/1`时,Vue Router会根据参数值1加载相应的组件或页面。 路由守卫是指在Vue Router,可以通过路由守卫来控制路由的访问权限和导航行为。Vue Router提供了三种类型的路由守卫:全局前置守卫、全局解析守卫和组件内的守卫。全局前置守卫会在路由切换之前被调用,可以用来进行权限验证或其他全局操作。全局解析守卫会在路由切换之前被调用,用来获取路由数据。组件内的守卫会在组件内部被调用,可以用来进行组件内部的权限验证或其他操作。 以下是一个示例代码,演示了如何使用动态路由路由守卫: ```javascript // 定义动态路由 const routes = [ { path: '/user/:id', component: User, meta: { requiresAuth: true // 设置需要登录才能访问的路由 } } ] // 创建路由实例 const router = new VueRouter({ routes }) // 全局前置守卫 router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login') // 如果需要登录才能访问的路由没有登录,则跳转到登录页面 } else { next() // 否则继续路由切换 } }) // 组件内的守卫 export default { beforeRouteEnter (to, from, next) { // 在进入路由前调用,可以访问组件实例this if (this.$store.state.user.isAdmin) { next() // 如果是管理员,则继续路由切换 } else { next(false) // 否则取消路由切换 } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值