Vue 列表页table点击跳转详情页后返回列表页table变色

需求:列表跳详情后,返回列表页,所有点击过的列表项变色;

实现:一、将跳转的列表信息存储在sessionStorage里

           二、返回列表的时候,取出sessionStorage信息,给table附样式

代码:

在详情页获取传递过来的行id,并存储在sessionStorage里,写在vue 的mounted里,注释已经很全了

mounted(){
    var idArray=[];
    var id = this.$route.query.id;
    var arr={id:id};
    //已经访问过的id不再存储
    if(sessionStorage.getItem('arr')){              //判断从sessionStorage获得的arr是否为空
      var arrget = sessionStorage.getItem('arr');    //获得已经存储的数据
      var arrayget = JSON.parse(arrget);            //转成JSON对象
      for(var i=0;i<arrayget.length;i++){
        if(arr.id ==arrayget[i].id){                     //判断新传来的id是否已在session内存储
          arrayget.splice(i,1); //删除下标为i的重复元素
        }
      }
      arrayget.push(arr);                   //继续赋值          
      idArray = arrayget;
    }else{
可以通过以下步骤来实现: 1. 在新闻列表面中,每个新闻都应该有一个唯一的标识,可以是数据库中的 ID 或者其他的标识符,比如新闻标题。使用这个标识符可以在点击新闻时,获取到对应的新闻数据。 2. 在点击新闻时,可以使用 Vue Router 中的路由参数来传递新闻标识符。在路由定义中,可以定义一个参数,比如 ":id",来接收这个标识符。 3. 在详情页组件中,可以通过 $route.params.id 来获取路由参数中传递的新闻标识符。然后可以使用这个标识符来从数据库中获取对应的新闻数据。 下面是一个示例代码: 在新闻列表面中: ```html <template> <div> <ul> <li v-for="news in newsList" :key="news.id"> <router-link :to="'/news/' + news.id">{{ news.title }}</router-link> </li> </ul> </div> </template> <script> export default { data() { return { newsList: [ { id: 1, title: '新闻 1', content: '新闻内容 1' }, { id: 2, title: '新闻 2', content: '新闻内容 2' }, { id: 3, title: '新闻 3', content: '新闻内容 3' }, ], }; }, }; </script> ``` 在路由定义中: ```js import NewsDetail from './NewsDetail.vue'; const routes = [ { path: '/news/:id', component: NewsDetail }, // ... ]; ``` 在详情页组件中: ```html <template> <div> <h2>{{ news.title }}</h2> <p>{{ news.content }}</p> </div> </template> <script> export default { data() { return { news: {}, }; }, mounted() { const newsId = this.$route.params.id; // 从数据库中获取对应的新闻数据 this.news = { id: newsId, title: `新闻 ${newsId}`, content: `新闻内容 ${newsId}`, }; }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值