Used in vue files
<template>
<div>
<keep-alive> //Component Cache <home-page v-if="pageName === 'homePage'"></home-page>
</keep-alive>
<add-page v-if="pageName === 'addPage'"></add-page>
<info-page v-if="pageName === 'infoPage'"></info-page>
<edit-page v-if="pageName === 'editPage'"></edit-page>
</div>
</template>
<script> //Introduce page fileimport homePage from './home'
import addPage from './add'
import infoPage from './info'
import editPage from './edit'
export default {
data() {
return {
pageName: '',
iData: ? () : {}
}
},
components: { //Register page homePage, addPage, infoPage, editPage
},
mounted() {
()
},
watch: {
$route() {
()
}
},
methods: {
routerPage() { //Which page is displayed when monitoring let name = this.$
if (name) {
= name
} else {
= 'homePage'
}
},
onPageName(flag = {}, data = {}) { //Change the page method this.$({
name: 'contract',
query: flag
})
= (data)
= data
}
}
}
</script>
this.$(); //Default to jump to home page
this.$({ //Call the jump page method, name is the page to be switched name: 'infoPage'
})
this.$({ //Jump the page and carry data name: 'addPage'
}, {
come: 'editPage',
batchUni:
})
Summary of vue
Why do you have
For vue, it is a total entry file. vue is a single page application, which is hung under the div with id as the app and then dynamically renders the routing template.
Single page application
Single-page applications are relative to multi-page applications. Multi-page applications are used to regenerate an html page every time the page jumps. The first screen time is fast (only html needs to be loaded once), and the search engine optimization effect is good (the html content is all there), but the switching is slow (every page switch requires an http request).
When a single page application is loaded for the first time, the html will be requested once. The subsequent page rendering relies on js to dynamically clear the content of the current page (principle: js can perceive changes in url), and then mount the content of the next page to the current page (front-end implementation, not back-end, no http sending delay). The first screen is slow, the search engine optimization effect is poor, but the switching is fast.
Practical code summary
Adaptive use of mobile phones (px*2/100=rem)
!function (e) {
var t =
, n =
, i = "orientationchange" in e ? "orientationchange" : "resize"
, a = function e() {
var t = ().width;
return = 5 * ((t / 750 * 20, 11.2), 8.55) + "px",
e
}();
("data-dpr", (/iphone/gi) ? : 1),
/iP(hone|od|ad)/.test() && (("ios"),
parseInt((/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8 && ("hairline")),
&& ((i, a, !1),
("DOMContentLoaded", a, !1))
}(window);The above is personal experience. I hope you can give you a reference and I hope you can support me more.