若依框架 路由带参数跳转有缓存的解决方法

文章展示了在若依框架中进行路由配置,包括隐藏组件、重定向以及子路由的设置。同时,详细说明了如何在Vue应用中从A页面跳转到B页面并传递参数,以及如何在B页面接收这些参数。此外,还讨论了路由的缓存控制选项。

若依框架的话,直接打开src/api/router/index.js路由配置项

 {
    path: '/storage',
    component: Layout,
    hidden: true,
    redirect: 'noredirect',
    children: [
      {
        path: '/order',
        component: () => import('@/views/storage/order'),
        name: 'material',
        meta: { title: '入库计划单', icon: 'user' }
      },
      {
        path: '/inventory',
        component: () => import('@/views/storage/inventory'),
        name: 'inventory',
        meta: { title: '收货清点', noCache: true,icon: 'user' }
      },
      // noCache: true true就可以每次跳转都刷新缓存了,默认是false.
     
      
    ]
  },

a页面——》跳进吧页面 下面附带路由跳转传值
a页面

  pathInventory(row){
    
      this.$router.push({ // 核心语句
        name: 'inventory',
        params: {
          id: row.id
        }
      })
    },

b页面

  created() { 
        console.log(this.$route.params.id)
   
    }, // vue实例初始化完成会执行
### 若依框架二次开发实现路由跳转 在若异框架中进行二次开发以实现实现路由跳转主要涉及几个方面:定义静态路由、动态加载组件以及处理参数化路径。对于页面之间的导航,可以利用Vue Router提供的编程式导航方法。 #### 定义静态路由 为了使应用程序能够识别特定URL模式并映射至相应视图组件,在`router/index.js`文件内注册固定路径及其关联的组件: ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/example', // URL地址 name: 'ExamplePageName', // 唯一名字用于唯一标识此条目 component: () => import('@/views/example.vue') // 动态懒加载对应组件 } ] }) ``` 上述代码片段展示了如何设置一条简单的路由规则[^3]。 #### 处理带参数的路径匹配 当需要支持带有查询参数或路径片段变量的情况时,则可以在定义route对象时指定`:id?`形式来表示可选参数;而针对必填项则去掉问号即可。例如: ```javascript { path: '/article/:id(\\d+)', // 正则表达式的使用确保只接受数字作为ID值 name: 'ArticleDetail', props: true, // 开启props选项允许直接接收来自url中的参数 component: ArticleComponent } ``` 这使得可以通过类似`/article/123`这样的链接访问文章详情页,并自动将`123`作为prop传递给目标组件[^4]。 #### 编程式导航与刷新机制 为了避免因缓存原因造成的内容未及时更新问题,在执行页面切换操作前应当调用`$router.push()`函数而非依赖HTML5 History API默认行为。此外,如果遇到即使改变了URL但视图却没有变化的现象,可能是因为新旧两个目的地之间存在相同的名称或其他属性导致被判定为同一节点从而不会触发重新渲染逻辑。此时可在进入下一个页面之前手动清除当前实例的状态或者强制重载整个单页应用(SPA)。 ```javascript this.$router.push({ name: 'TargetViewName', params: { id } }).catch(err => console.log('Navigation Error:', err)) ``` 以上就是有关于若依框架下完成自定义路由配置及优化用户体验的一些实践技巧。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值