nuxt整合vue和audio或video时引发的路径跳转问题

nuxt整合vue和audio或video时引发的路径跳转问题

//自己写的一个上一首方法，还不够好使
leftMusic(row){        
//调用你的el表格的ref命名,例如：
this.$refs.sing.setCurrentRow(row);            
this.sqid -= 1;         
 if(this.sqid < -1){              
 this.sqid = 9;             
 this.musicpage.pageNum-=1;                      
this.searchPageMusic(); }       
 if(this.musicpage.pageNum == 0){              
 this.musicpage.pageNum = this.musicpageList.pages;             
  this.searchPageMusic();              
  this.sqid = this.musicpageList.size-1;        
  }
  **——————————————————————此处开始为本次分享的重点**
//将备用对象数据作为容器接在这里插入代码片`收该行的数据       
this.musice = row;       
 //判断开头路径是否重复(此判断设计整合nuxt时的路径，如果你没涉及到路径问题，请忽略)       
  if (this.musice.murl.startsWith('/_nuxt')){            
  //如果开头为此开头的路径，将进行切割，并保存到新的数组容器中                
  var xurl = this.musice.murl.split('/_nuxt/');               
   //并重置容器对象的路径：require('@/'+xurl[1])                
   this.musice.murl = require('@/'+xurl[1]);               
    //将容器对象的数据保存到音乐对象中                
    this.music = this.musice;        
    }else{           
     //重置容器对象的路径：require('@/'+xurl[1])                
     this.musice.murl = require('@/'+this.musice.murl)                
     //将容器对象的数据保存到音乐对象中                
     this.music = this.musice;        
     }
}

从上面可以发现，你如果要使用audio和video的动态跳转路径的时候，可以使用上面的方法，/——nuxt/是本人发现的一个bug，如果你每一次点击表格都需要切换路径，那这段代码或许可以帮到你。

————写上面代码之前，你先确定你的nuxt.config.js的文件中是否有这样的代码
此处是部分代码

  build: {   
   transpile: [/^element-ui/],   
    /*    ** You can extend webpack config here    */ 
     //  loaders: {  
     //   vue: {  
     //     transformAssetUrls: { 
      //       audio: 'src' 
       //     }  
       //   }  
       // },   
        extend (config, ctx) {     
         config.module.rules.push({        
         test: /\.(ogg|mp3|wav|mpe?g)$/i,       
          loader: 'file-loader',        
          options: {          
          name: '[path][name].[ext]'        
          }      
          })    
          }  
       }

以下是完整nuxt.config.js的代码

export default {  
mode: 'universal',  
/*  ** Headers of the page  */  
head: {    
title: process.env.npm_package_name || '',    
meta: [{ charset: 'utf-8' },      
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },     
{hid:'description',name: 'description',content:process.env.npm_package_description||'' } ],    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }    ]  },  
/*  ** Customize the progress-bar color  */  
loading: { color: '#fff' },  
/*  ** Global CSS  */  
css: [    'element-ui/lib/theme-chalk/index.css'  ],  
/*  ** Plugins to load before mounting the App  */  
plugins: [    '@/plugins/element-ui',   
 {src:'~plugins/api.js'}  ], 
  /*  ** Nuxt.js dev-modules  */ 
   buildModules: [  ],  
   /*  ** Nuxt.js modules  */ 
    modules: [   
     // Doc: https://axios.nuxtjs.org/usage    '@nuxtjs/axios',  ],  
     /*  ** Axios module configuration  ** See https://axios.nuxtjs.org/options  */  
     axios: {    baseURL:'http://localhost:16198/ji'  }, 
      /*  ** Build configuration  */  
      build: {    transpile: [/^element-ui/],    
      /*    ** You can extend webpack config here    */ 
       //  loaders: { 
        //   vue: {  
        //     transformAssetUrls: { 
         //       audio: 'src'  
         //     }  
         //   }  
         // },    
         extend (config, ctx) {     
          config.module.rules.push({        
          test: /\.(ogg|mp3|wav|mpe?g)$/i,       
           loader: 'file-loader',        
           options: {          
           name: '[path][name].[ext]'       
            }      
            })    
            }  
       }}