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

Tony-hnv

已于 2022-06-26 13:48:09 修改

阅读量4.9k

点赞数 3

文章标签： vue.js 前端 javascript

于 2022-06-25 19:48:06 首次发布

本文链接：https://blog.csdn.net/Tonyhnv/article/details/125462969

版权

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

代码如下：

<template>
    <div class="body" v-loading="loading" :style="{ backgroundImage:'url('+ bgi +')' }">
    </div>
</template>
<script>
data () {
reyurn {
		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' } })