modify(debug tag): change router to localstorage

This commit is contained in:
songwanli2025@163.com 2020-03-04 18:22:25 +08:00
parent 066c4fc35e
commit b79fdcee97
7 changed files with 899 additions and 1846 deletions

View File

@ -94,7 +94,7 @@ export default {
methods: {
handleStartClick () {
this.$router.push(
/^(\/[^/]+){3}/.exec(this.$route.path)[0] + '/doc/start'
/^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
)
},
handleTitleMouseEnter () {

View File

@ -6,6 +6,7 @@
:lang="lang"
:items="flattenedItems"
:env="env"
:mode="mode"
@lang-change="handleLangChange"
@mode-change="handleModeChange"
/>
@ -21,6 +22,7 @@
import DocHeader from './header.vue'
import menuOptions from './menuOptions'
import { i18n } from './init'
import { setState } from './store'
export default {
components: {
@ -38,6 +40,12 @@ export default {
beforeRouteUpdate (to, from, next) {
this.$i18n.locale = to.params.lang
next()
this.mode = localStorage.getItem('mode')
},
data () {
return {
mode: localStorage.getItem('mode') ? localStorage.getItem('mode') : 'debug'
}
},
computed: {
env () {
@ -74,14 +82,6 @@ export default {
set (theme) {
this.$router.push(changeThemeInPath(this.$route.fullPath, theme))
}
},
mode: {
get () {
return this.$route.params.mode === 'debug' ? 'debug' : 'common'
},
set (mode) {
this.$router.push(changeModeInPath(this.$route.fullPath, mode))
}
}
},
methods: {
@ -90,6 +90,8 @@ export default {
},
handleModeChange (mode) {
this.mode = mode
localStorage.setItem('mode', mode)
setState(mode)
}
}
}
@ -103,11 +105,6 @@ function changeThemeInPath (path, theme) {
const themeReg = /(^\/[^/]+\/)([^/]+)/
return path.replace(themeReg, '$1' + theme)
}
function changeModeInPath (path, mode) {
const modeReg = /(^\/[^/]+\/[^/]+\/)([^/]+)/
return path.replace(modeReg, '$1' + mode)
}
</script>
<style lang="scss" scoped>

View File

@ -99,13 +99,16 @@ export default {
env: {
type: String,
default: null
},
mode: {
type: String,
default: null
}
},
data () {
return {
searchInputValue: '',
version,
mode: 'debug',
themeOptions: {
dark: {
label: 'Light',
@ -175,18 +178,6 @@ export default {
}
]
}
// modeOptions () {
// return [
// {
// label: this.$t('common'),
// next: 'common'
// },
// {
// label: this.$t('debug'),
// next: 'debug'
// }
// ]
// }
},
methods: {
handleLogoClick () {
@ -195,7 +186,7 @@ export default {
return
}
this.$router.push(
/^(\/[^/]+){3}/.exec(this.$route.path)[0]
/^(\/[^/]+){2}/.exec(this.$route.path)[0]
)
},
handleSelect (value) {
@ -204,14 +195,14 @@ export default {
handleMenuSelect (value) {
if (value === 'home') {
this.$router.push(
/^(\/[^/]+){3}/.exec(this.$route.path)[0]
/^(\/[^/]+){2}/.exec(this.$route.path)[0]
)
} if (value === 'doc') {
if (/^(\/[^/]+){3}\/doc/.test(this.$route.path)) {
if (/^(\/[^/]+){2}\/doc/.test(this.$route.path)) {
} else {
this.$router.push(
/^(\/[^/]+){3}/.exec(this.$route.path)[0] + '/doc/start'
/^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/doc/start'
)
}
}
@ -221,8 +212,7 @@ export default {
},
handleModeChange () {
this.mode = this.modeOptions[this.mode].next
this.$emit('mode-change', this.mode)
this.$emit('mode-change', this.modeOptions[this.mode].next)
},
handleLanguageChange () {
this.$emit('lang-change', this.langOptions[this.lang].next)

View File

@ -234,78 +234,40 @@ const children = [
},
{ path: '/n-select-debug', component: selectDebug }
]
let routes = []
if (env === 'development') {
routes = [
{
path: '/:lang/:theme/:mode/n-popover-debug',
component: popoverDebug
},
{
path: '/:lang/:theme/:mode/n-back-top-debug',
component: backTopDebug
},
{
path: '/:lang/:theme/:mode/n-cascader-debug',
component: cascaderDebug
},
{
path: '/:lang/:theme/:mode',
component: Entry,
children: [
{
path: '/:lang/:theme/:mode',
component: LandingPage,
name: 'home'
},
{
path: '/:lang/:theme/:mode/doc',
component: DocEntry,
children: withPrefix('/:lang/:theme/:mode/doc', children)
}
]
},
{
path: '/*',
redirect: '/zh-CN/light/debug'
}
]
} else {
routes = [
{
path: '/:lang/:theme/n-popover-debug',
component: popoverDebug
},
{
path: '/n-back-top-debug',
component: backTopDebug
},
{
path: '/n-cascader-debug',
component: cascaderDebug
},
{
path: '/:lang/:theme',
component: Entry,
children: [
{
path: '/:lang/:theme',
component: LandingPage,
name: 'home'
},
{
path: '/:lang/:theme/doc',
component: DocEntry,
children: withPrefix('/:lang/:theme/doc', children)
}
]
},
{
path: '/*',
redirect: '/zh-CN/light'
}
]
}
const routes = [
{
path: '/:lang/:theme/n-popover-debug',
component: popoverDebug
},
{
path: '/n-back-top-debug',
component: backTopDebug
},
{
path: '/n-cascader-debug',
component: cascaderDebug
},
{
path: '/:lang/:theme',
component: Entry,
children: [
{
path: '/:lang/:theme',
component: LandingPage,
name: 'home'
},
{
path: '/:lang/:theme/doc',
component: DocEntry,
children: withPrefix('/:lang/:theme/doc', children)
}
]
},
{
path: '/*',
redirect: '/zh-CN/light'
}
]
const router = new VueRouter({
mode: 'history',

File diff suppressed because it is too large Load Diff

7
demo/store.js Normal file
View File

@ -0,0 +1,7 @@
export const state = {
mode: localStorage.getItem('mode')
}
export function setState (mode) {
state.mode = mode
}

View File

@ -57,6 +57,7 @@
<script>
import mdCode from '../../src/_icons/md-code'
import { state } from '../store'
export default {
components: {
@ -74,12 +75,13 @@ export default {
controller: {},
isShow: true,
name: '',
isDebug: false
isDebug: false,
state: state
}
},
computed: {
mode () {
return this.$route.params.mode
return this.state.mode
}
},
watch: {