我正在使用两页的Vue路由器:
let routes = [
{
path: '/',
component: require('./components/HomeView.vue')
},
{
path: '/intro',
component: require('./components/IntroView.vue')
}
]
这很好,除了我的每个组件都有不同的主体样式:
HomeView.vue:
<template>
<p>This is the home page!</p>
</template>
<script>
export default {
}
</script>
<style>
body {
background: red;
}
</style>
IntroView.vue:
<template>
<div>
<h1>Introduction</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
body {
background: pink;
}
</style>
我的目标是让这两个页面具有不同的背景样式(最终在它们之间进行过渡).但是当我去home路线(有red背景)的时候,然后点击intro路线,背景颜色保持不变red(我希望它改变为pink).
编辑: index.html:
<body>
<div id="app">
<router-link to="/" exact>Home</router-link> …我的组件是这样的:
<template>
...
<input type="text" class="form-control" v-model="rawFilter" placeholder="Search" @keyup="getPlayers">
...
</template>
<script>
import _ from 'lodash'
...
export default {
...
data() {
return{
msg:'hello vue',
rawFilter:'',
loading:false
}
},
...
methods: {
getPlayers: _.debounce(function(e) {
const text = e.target.value.trim()
this.$store.dispatch('getPlayers', {
q: text
})
},1000),
...
}
}
</script>
当我搜索时,在显示数据之前,我想添加一个加载图标
我怎么能在vue.js 2中做到这一点？