VUE的router-link不刷新,路由跳转后缓存还在的终极一步到位的解决方法,也适用与若依框架

网上找了一大堆,屁用都没有,自己琢磨了一下简单的要死.
如果你用的是若依框架的话,直接打开src/api/router/index.js路由配置项
比如,我的html是这样的

 <template slot-scope="scope" >
          <router-link :to="'/system/sale-saleDetail/index/' + scope.row.id" class="link-type" >
            <span>{{ scope.row.userMobile }}</span>
          </router-link>
</template>

我是要跳转到/system/sale-saleDetail/index/+ id参数
那我的路由设置是这样的:

export const dynamicRoutes = [
  {
    path: '/system/sale-saleDetail',
    component: Layout,
    hidden: true,
    permissions: ['system:sale:list'],
    children: [
      {
        path: 'index/:id(\\d+)',
        component: () => import('@/views/system/sale/saleDetail'),
        name: 'SaleDetail',
        meta: { title: '销售订单审核数据',noCache: true  , activeMenu: '/system/sale' }
      }
    ]
  },]

注意到这个noCache: true 参数了没?只要是true就可以每次跳转都刷新缓存了,默认是false.
网上搞得那些方法没一个有用的,浪费时间啊!.
附一个参数配置:
在这里插入图片描述
那有的朋友问了,我菜单不刷新,这里也没有能配置的地方怎么办?
看样子是写代码写晕了,只需要前端的菜单设置配置一下不缓存就好了(若依框架)

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: Vue中的router-link组件可以用于跳转到指定的路由。如果需要在子路由中进行跳转,可以在router-link中指定子路由的路径。 例如,如果有一个父路由为"/parent",子路由为"/parent/child",可以使用以下代码进行跳转: ``` <router-link to="/parent/child">跳转到子路由</router-link> ``` 这样就可以在父路由跳转到子路由了。需要注意的是,子路由的路径应该是相对于父路由的路径的。 ### 回答2: 在Vue.js中,router-link是一个用于创建可访问URL的组件。它基本上是一个a标签,但它能够让你设置HTML5的history API的路由,这意味着你不会重新加载页面,从而实现了单页面应用程序的跳转。 而子路由跳转是指在一个页面中,有多个子路由,当用户点击其中一个子路由的时候,只有这个子路由的内容会被渲染出来,而其他的子路由不会重新渲染。 实现子路由跳转,需要在路由配置中设置子路由,如下所示: ``` const router = new VueRouter({ routes: [ { path: '/parent', component: Parent, children: [ { path: 'child1', component: Child1 }, { path: 'child2', component: Child2 } ] } ] }) ``` 在这里,我们设置了一个父路由/parent,它有两个子路由/parent/child1和/parent/child2。当用户点击/parent/child1,Child1组件会被渲染到Parent组件中,而/parent/child2同理。 为了实现在模板中进行子路由跳转,我们可以使用router-link组件。在router-link组件中,我们需要设置to属性,它的值应该是子路由的路径。例如: ``` <router-link to="/parent/child1">Child 1</router-link> <router-link to="/parent/child2">Child 2</router-link> ``` 当用户点击Child 1或Child 2时,对应的子路由组件将被渲染到Parent组件中,实现子路由跳转功能。 总的来说,router-link路由跳转Vue Router提供的一种方便的路由管理方式。通过设置子路由和在模板中使用router-link组件,我们可以快速实现在单页面中切换不同子路由的功能,提供更好的用户体验。 ### 回答3: Vue RouterVue.js 官方的路由管理器,它基于 Vue.js 的动态组件系统,可将组件与路由映射关联。Router 可以为 Vue 应用提供基于 URL 的导航与视图管理功能。而 router-link 是在 Vue Router 中提供的一种用于路由导航的组件。在 Vue Router 中,路由是以层级结构来组织的。有时候,我们需要在一个路由内部打开子路由,比如在一个有子路由页面上点击链接实现内部跳转,这时可以用到 router-link 的子路由跳转功能。 router-linkVue Router 中提供的用于路由导航的组件,它接收一个 to 参数,用于指定要跳转路由路径。如果在 to 参数中使用了"/"和子路由的路径,就可以实现子路由跳转的功能。例如: ``` <router-link to="/parent"> 去父级 </router-link> <router-link to="/parent/child"> 去子级 </router-link> ``` 这段代码中,第一个 router-link 组件的 to 参数为 "/parent",意思是跳转到父级路由;第二个 router-link 组件的 to 参数为 "/parent/child",意思是跳转到子路由。当点击第二个 router-link 组件时,就会实现从父级路由跳转到子级路由的效果。 需要注意的是,当使用子路由时,需要在父组件中使用 router-view 组件占位显示子组件,如下: ``` <template> <div> <h1>父级组件</h1> <router-view/> </div> </template> ``` 这样,子组件就会显示在父组件中,实现了子路由跳转。 总的来说,Vue Router 提供了强大的路由导航功能,而 router-link 组件则是其中很重要的一部分。如果需要在一个路由内部打开子路由,可以采用 router-link 的子路由跳转功能,具体可以在 to 属性中设置"/"和子路由的路径。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值