56 lines
1.0 KiB
Vue
56 lines
1.0 KiB
Vue
|
<template>
|
|||
|
|
<router-view></router-view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
created() {
|
|||
|
|
//在页面加载时读取sessionStorage里的状态信息
|
|||
|
|
if (sessionStorage.getItem('storeState')) {
|
|||
|
|
//replaceState，替换store的根状态
|
|||
|
|
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('storeState'))))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//在页面刷新时将vuex里的信息保存到sessionStorage里
|
|||
|
|
window.addEventListener('beforeunload', () => {
|
|||
|
|
sessionStorage.setItem('storeState', JSON.stringify(this.$store.state))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
#app {
|
|||
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav {
|
|||
|
|
padding: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav a {
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nav a.router-link-exact-active {
|
|||
|
|
color: #42b983;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
margin: 0px;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|