精华内容
下载资源
问答
  • vue 列表页跳转详情页时记录列表页位置
    // 路由跳转时记录scrollTop
    this.$store.commit('SET_SCROLL', this.$refs.listcon.scroller.scrollTop)
    //返回页面时是页面滚动到记录的位置
     if (this.$store.getters.scroll !== 0) {
       this.$nextTick(() => {
         this.$refs.listcon.scroller.scrollTop = this.$store.getters.scroll
       })
     }
    

    ps:$refs.listcon需限制高度,overflow:auto

    展开全文
  • 主要介绍了vue 列表页跳转详情页获取id以及详情页通过id获取数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据 2018年12月17日 20:19:00 荔枝吖 阅读数:1644 1.先在router.js中配置路由 { path: '/movieDetail/:movieId', name: 'movieDetail', component:...
    vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
    2018年12月17日 20:19:00 荔枝吖 阅读数:1644
     
    
    1.先在router.js中配置路由
    
    {
          path: '/movieDetail/:movieId',
          name: 'movieDetail',
          component:movieDetail
      }
    2.获取详情页的id,并派发父组件事件(movieList.vue)页面
    
     <li v-for="(item,index) in movies"  :key="index" @click="selectItem(item)">
     
        。。。。。。。
     
    </li>
     methods:{
              selectItem(item){
                  //console.log(item.moveId);
                  //var item = item.moveId;
                 this.$emit('select',item);
     }
    3.在movieShow页面引用movieList.vue页面
    
    <movieList :movies="movies"  @select="movieDetail"></movieList>
               //转入电影详情页
                movieDetail(item){
                  console.log(`${item.moveId}`);
                  this.$router.push({
                      path: `/movieDetail/${item.moveId}`
                 })
              }
    
    4.上面获取到了 id,接下来实现详情页通过id获取数据
          1.先获取传过来的id
        
        		var movieId = that.$route.params && that.$route.params.movieId;
        		
        2)引用豆瓣网的API
        
          //   /v2/movie/subject/:id 单个电影条目信息
          const url = `api/movie/subject/${movieId}`;
                 that.$axios.get(url)
                  .then((res)=>{
                    console.log(res.data);
          })
    
    5.在页面中引用
    
         <scroll class="movie-detail"
                       :data="movieDetail"
               >
         
               。。。。。。
         
        </scroll>
        
    6.在js中将movieDetail进行赋值   movieDetail = res.data
        
        	data(){
              return {
                movieDetail:{}
              }
            },
            created(){
               this._getDateil();   
            },
            components:{
              scroll
            },
            methods:{
              _getDateil(){
               var that = this;
               var  movieId = that.$route.params && that.$route.params.movieId;
               console.log(movieId);
               //that.getMovieDetail(movieId);
                const url = `api/movie/subject/${movieId}`;
                 that.$axios.get(url)
                  .then((res)=>{
                    
                    console.log(res.data);
         
                     movieDetail = res.data;
                })
              },
    

    转载自:https://blog.csdn.net/weixin_43650973/article/details/85055406

    展开全文
  • vue 列表页跳转详情页获取id的方法

    万次阅读 2018-09-14 10:35:44
    详情页路由 { path: 'orderDetails/:id', name: 'orderDetails', component: orderDetails, ...列表 openDetails(row){ //查看详情 this.$router.push({path:'orderDetails/'+row.number}) }, 详情页 ...

    详情页路由

    {
        path: 'orderDetails/:id',
        name: 'orderDetails',
        component: orderDetails,
    },

    列表

    openDetails(row){
        //查看详情
        this.$router.push({path:'orderDetails/'+row.number})
    },

    详情页

    this.$route.params && this.$route.params.id

     

    展开全文
  • vue点击列表进入详情页

    千次阅读 2020-04-07 10:52:47
    获取详情页id 详情页路由(index.js) { path: '/mediaContent/:id', name: 'mediaContent', component: MediaContent }, ...列表页(mediaManagement.vue) <div> <el-table :da...

    获取详情页id

    详情页路由(index.js)

    {
              path: '/mediaContent/:id',
              name: 'mediaContent',
              component: MediaContent
            },
    

    列表页(mediaManagement.vue)

    <div>
          <el-table :data="titleData" style="width: 80%" class="tableStyle">
            <el-table-column prop="mediaTitle"></el-table-column>
            <el-table-column prop="mediaAbstract"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button type="text" @click="detail(scope.row)">更多</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    
        detail(row) {
          //查看详情
          this.$router.push({ path: "mediaContent/" + row.id });
        },
    

    通过this.$router.push({})实现路由跳转。

    详情页(MediaContent.vue)

    mounted() {
        this.getArticle();
      },
      methods: {
        getArticle() {
          //获取当前页面接收到的id
          this.id = this.$route.params && this.$route.params.id;
          this.$http({
            method: "post",
            url: "/api/getArticle"
          })
            .then(response => {
              for (let i = 0; i < response.data.length; i++) {
                if (this.id === response.data[i].id) {
                  this.$refs.testTable.innerHTML = response.data[i].mediaContent;
                }
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        }
      }
      }
    

    表结构

    在这里插入图片描述
    详情页的id是从表中的id获取到的,通过getArticle()方法从后台获取id

    效果图

    获取到的详情页id效果如下:
    在这里插入图片描述
    参考博客

    展开全文
  • 父页面向子页面传值,可以通过router传值。 比如我的项目场景是列表页点查看去到详情页,然后就...再来解释children里面:合同管理是列表页,添加合同合同详情都是详情页,可以看到详情页都有redirectName: ‘con...
  • 本文主要实现列表页跳转详情页,返回列表页时回到上次滚动位置。 设置router添加name值meta.keepAlive值。 router.js vue 版本大于 2.1.0时候可以使用 include exclude。这里需要注意的是,一定要在页面添加...
  • 主要介绍了vue keep-alive列表页缓存 详情页返回上一不刷新,定位到之前位置,本文通过实例代码效果图展示给大家介绍的非常详细,需要的朋友可以参考下
  • mtindex跳转guessdetail一、router/index.js{  path:'/mtindex',  component: mtindex,  children:[  {  path:':shopid',  component:guessdetail  }  ]   },二、mtindex.vue1、ht...
  • vue项目实现从商品列表页跳转详情页后,返回列表页保持页面在原位置,且列表页刷新的方法 页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> <div id="app"> <keep-alive ...
  • vue接口数据进详情页

    2020-03-17 21:16:05
    vue接口数据进详情页 1,接口写法 2,从接口拿到数据,遍历数据到页面 3,进入详情页,地址栏传id 3.1 3.2
  • 再从详情页面B跳转到列表页面A时,需要将A页面恢复到跳转到详情页面B之前的状态,这样的需求对于非单页面来说实现起来很容易,但是对于非单页面来说并不是那么的容易,本文主要讲在vue项目中如何实现。 2、主要用到...
  • 页面中含有H5 自定义音频播放器另作说明H5自定义带列表音频播放器 ...列表页详情页: 2、各网页需要的通用点 cookie操作 //设置cookie setCookie(cname, cvalue, exdays) { ...
  • vue点击列表传参进入详情页

    万次阅读 2019-01-28 17:33:56
    列表页文件的methods方法中写跳转代码 methods: { handleWatch (row) { // console.log(row.activeJobId) this.$router.push({path: 'gd_detail/', query: {id: row.activeJobId}}) } 2.在详情页文件的...
  • 移动端开发 vue项目中,ios机器上点击返回列表页的时候,会出现空白现象,触屏一下或者拉动一下,数据才会显示出来,针对此问题,尝试了很多次,最终解决方法如下: 给列表的外层容器加上如下样式: overflow-y: ...
  • 1.name与params结合使用, 结果: 2.path与query结合使用 结果: router.js 配置 如果跳转后一级导航不亮,/forecast是列表页,/plate是详情页
  • 需求:列表跳详情后,返回列表页,所有点击过的列表项变色; 实现:一、将跳转的列表信息存储...在详情页获取传递过来的行id,并存储在sessionStorage里,写在vue 的mounted里,注释已经很全了 mounted(){ var i...
  • 后台管理系统中经常要实现这样一个事儿,点击列表页的某一条,进入详情页,网上百度许久后,发现不能完全解决我的问题。在请教一位前端同学后,来总结下。 1,在列表页中定义点击跳转的方法: openDetail:function ...
  • // 判断机型 ios/安卓 const u = navigator.userAgent const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) const el = isiOS ? document.... Vue.nextTick(() => { el.scrollTop = 0 }) } })
  • 一、解释: 列表页( list ): 比如订单列表, 可以是按时间倒序的列表、也可能是根据一些条件查询出的...列表页( list ) 进入详情页( view ),再返回列表页( list )时,列表页( list )不能刷新,连页数、筛选条件等...
  • 列表页: ”{>(注意:用params传参这里是命名路由,用name) 路由配置如下: export default new Router({ routes: [ { path: '/msgDetail/:id', name: 'msgDetail', component: msgDetail } ] 详情页
  • 二、总的列表页中加了筛选条件,经过筛选后进入筛选结果,然后点击筛选结果中的任意一种商品到详情页后再返回到筛选结果,对刚刚的筛选结果进行缓存,不会刷新。 作为一个vue的小白,对于解决这样的问题首先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,449
精华内容 2,579
关键字:

vue列表页和详情页

vue 订阅