【VUE】vue动态变换背景图片的实现 +背景图片铺满+ 一般路由的配置

一 、动态变换背景图片的实现

代码如下：

<template>
    <div class="body" v-loading="loading" :style="{ backgroundImage:'url('+ bgi +')' }">
    </div>
</template>
<script>
data () {
return {
		bgi: require('path')   // path就是背景图片文件的存放路径
	}
	// 用函数方法等来实现修改路径从而实现背景图片变换
}
</script>

易错点：需要require来请求图片文件才可正常显示。

二 、背景图片铺满

   background: url('path'); 
    background-repeat: no-repeat; 
    background-position: center center;  
    background-size: cover;  
    min-height: 100vh;

三 、vue一般路由的配置

1. 准备

首先：
第一步是要保证已安装了vue-router插件，若已经安装请移步到2.路由详细设置

• 若无安装，在终端使用命令
  npm install vue-router
  或者
  yarn add vue-router

2. 路由详细设置

(如果你是刚刚从第一步安装vue-router来的) 在src文件下新建一个文件夹：router ，并在该目录下新建文件：index.js

index.js

import Vue from 'vue'   // 引入vue
import VueRouter from 'vue-router'  // 引入vue-router插件
import Search from '../views/search.vue'  // 引入要跳转的路由页面.vue文件
 
Vue.use(VueRouter)   // use一下引入的vue-router
 
const routes = [     // 路由路径配置信息，每个对象对应一个页面
  {
    path: '',         // path：显示在地址栏的路径
    redirect: '/search'  // 可选写，配置跳转路径
  }, {
    path: '/search',   
    name: 'Search',      // 页面名称
    component: Search    // 页面来源文件
      children: []  // 设置子路由，将设置信息以对象的形式写入数组内，若不设置子路由可选择不写
  }
]
 
const router = new VueRouter({       // 新建一个router实例
  mode: 'history',                  // 路由模式选择：history 或者 hash
  // history 和 hash 的区别：
  //对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。
  // 注意：vue-cli搭建的项目默认是hash模式
  base: process.env.BASE_URL,   // 设置的基准地址，一般写法不用修改
  routes     // 挂载路由路径配置信息
})
 
export default router
 

3. 将router信息挂在入口文件main.js上

main.js下：

import router from './router'
 
new Vue({
  router,  // 挂载在app上
  render: h => h(App)
}).$mount('#app')
 

4. 使用路由跳转

• 使用<router-link to=''></router-link>来跳转页面，相当于标签,其中to可以是动态参数，即:to='path',属于声明式

---

• 在需要被跳转显示的页面使用<router-view></router-view>来占位路由出口

<template>
  <div id="about">
    <p>接口</p>
    <router-link to="/search" >返回搜索页</router-link>
    <router-view></router-view>
  </div>
</template>

---

• 另一种跳转方式，router.push('path')，属于编程式可以传参，如下：

// 字符串
router.push('home')
//对象
router.push({ path: 'home' })
//命名的路由
router.push({ name: 'user', params: { userId: 112233 } })
//带查询参数，例如变成 /register? from=mobile
router.push({ path: 'register', query: { from: 'mobile' } })

---

• 还有两种方式：router.replace('path') 和router.go(n)

注意： replace方法不会在historey中增加历史记录
go的参数 n 是一个整数，正整数表示前进n步，负整数表示后退|n|步

以上就是我暂时总结出的，如果有些表述有误烦请评论区指出或者私信，希望能帮到需要的你，一起进步！