调整切换背景2

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <dv-full-screen-container class="btgym" :style="'{background-image:url('+ {bgimg} +')}'">
+    <dv-full-screen-container class="btgym" :style="{ backgroundImage:'url('+bgimg+')' }">
 
       <!-- 顶部信息 -->
       <div class="topnav">
@@ -14,7 +14,7 @@
           </div>
         </div>
         <div class="links">
-          <router-link class="" to="/ty">体育</router-link>
+          <router-link to="/ty">体育</router-link>
           <router-link to="/">总览</router-link>
           <router-link to="/cultrue">文化</router-link>
         </div>
@@ -28,15 +28,26 @@
 </template>
 
 <script>
+import ty from '@/views/ty/index'
 export default ({
+  components:{
+    ty
+  },
   data(){
     return{
-       bgimg:require("assets/index/bg.jpg")
-      //  bgimg:""
+       //bgimg: require("@/assets/index/bg.jpg")
+       bgimg:"",
     }
   },
+  created(){
+    
+    // console.log(this.$route)
+    // this.bgimg = this.$route.params.img
+  },
   mounted(){
-    //console.log(this.bgimg)
+   // console.log("app vue")
+   // console.log(this.$route.meta)
+    // this.bgimg = this.$route.meta.img
   }
 })
 </script>
@@ -54,6 +65,7 @@ body {
   height: 100vh;
   // position: relative;
   // background-image: url("assets/g_bg.jpg");
+  // background-image: var(--bg);
   // background-size: 100%;
   // background-repeat: no-repeat;
 

src/router/index.js

@@ -8,28 +8,37 @@ const routes = [
   {
   path: '/',
   name: 'index',
-  component: () => import('../views/index.vue')
+  component: () => import('../views/index.vue'),
+  meta:{
+    img:require("../assets/index/bg.jpg")
+  }
+
 },
 
-// 总览
+// 文化
 {
-  path: '/dashboard',
-  name: 'dashboard',
-  component: ()=>import("../views/dashboard/index.vue")
-
+  path: '/cultrue',
+  name: 'cultrue',
+  component: ()=>import("../views/cultrue/index.vue"),
+  meta:{
+    img:require("@/assets/wh/bg.jpg")
+  }
 },
 
+
 // 体育
 {
   path: '/ty',
   name: 'ty',
-  component: ()=>import("../views/ty/index.vue")
-
+  component: ()=>import("../views/ty/index.vue"),
+  meta:{
+    img:require("@/assets/ty/bg.jpg")
+  }
 }
 
 ]
 const router = new VueRouter({
-  mode: "history",
+  mode: "hash",
   routes
 })
 

src/views/cultrue/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <div id="cultrue">
+        文化
+    </div>
+</template>
+<script>
+export default{
+    data(){
+        return{
+            
+        }
+    },
+    mounted(){
+        console.log("wh vue")
+        console.log(this.$route.meta)
+    },
+    methods:{
+
+    }
+}
+</script>

src/views/index.vue

@@ -9,15 +9,12 @@ export default{
 
     data(){
         return{
-            // 首页背景图片
-            bgimg:'assets/index/bg.jpg'
+            //
         }
     },
-    // computed(){
-    //     this.$emit.bgimg = require (this.bgimg)
-    // },
-    // mounted(){
-    //     this.$emit.bgimg = require (this.bgimg)
-    // }
+    mounted(){
+       console.log("index.vue")
+       console.log(this.$route.meta)
+    }
 }
 </script>

src/views/ty/index.vue

@@ -1,3 +1,21 @@
 <template>
     <div id="ty"></div>
-</template>
+</template>
+<script>
+export default{
+    data(){
+        return{
+
+        }
+    },
+    mounted(){
+        console.log("ty vue")
+        console.log(this.$route.meta)
+        let bgurl = this.$route.meta
+        this.$emit("bgimg",bgurl)
+    },
+    methods:{
+
+    }
+}
+</script>