single page web application (SPA)
An application with only one Web page is a Web application that loads a single HTML page and dynamically updates the page when the user interacts with the application.
Compare traditional applications
Single page application:
Only the first time will the page be loaded, and each subsequent request is only to obtain the necessary data Then, the data obtained by js parsing in the page is displayed in the page. Modular development and design is very important for single page applications.
Traditional multi page applications:
For traditional multi page applications, each request server returns a complete page.
advantage
realization
1. It mainly relies on the use of Ajax and anchor technology.
2. Monitor the event of anchor value change and request corresponding data according to different anchor values.
3. It was originally used to jump inside the page, locate and display the corresponding content.
Vue routing
Multi view single page Web application (SPA based on html) can be realized through vue routing.
1. Import necessary library
<script src="js/vue.js"></script> <script src="js/vue-router.min.js"></script>
2. Create a user-defined component (extend is the syntax for constructing a component. If you give it parameters, it will give you a component), or register the component through component.
const Home = Vue.extend({ template: '<div><h2>{{index}}</h2><div>Here is the content of the home page</div></div>', //Template data(){ return {index:'home page'} } }); const About = Vue.extend({ template: '<div><h2>{{about}}</h2><div>Here is the content</div></div>', //Template data(){ return {about:'about'}; } }); const Role = Vue.extend({ template: '<div><h2>{{role}}</h2><div>Here is the character content</div></div>', //Template data(){ return {role:'role'}; } });
3. Define the route (i.e. line).
const routes = [{ path: '/home', component: Home }, { path: '/about', component: About }, { path: '/role', component: Role }];
4. Define the router of Vue.
const router = new VueRouter({ routes: routes });
5. Create Vue instances and mount routes.
//establish Vue Instance and mount route var vm = new Vue({ // el:'#app ', / / use method mount mode instead router:router,//Designated router data: { ts: new Date().getTime(), index: 'Here is the home page', about: 'Here is about the page', role: 'Here is the role page', }, methods: { go(){ this.$router.go(1);//Get the current router and advance a route }, back(){ this.$router.go(-1);//Get the current router and back one route }, change(v){ this.$router.push({//Get the current route and switch to the specified component path: v }); } } }).$mount("#app");//Mount area
6. Use router link and router view in HTML.
<!-- use RouterLink Component navigation. --> <!-- <router-link> By default, it will be rendered as a `<a>` label --> <!-- Pass in `to` Property specifies the link. --> <router-link to="/home">go to Home</router-link> <!-- use RouterView Component display. --> <router-view></router-view>
Router link related properties
-
to: indicates the link of the destination route
- Replace: if the replace attribute is set, router will be called when clicked Replace() instead of router Push(), no history record will be left after navigation.
- Append: after the append property is set, the base path is added before the current (relative) path. For example, we navigate from / A to a relative path B. If append is not configured, the path is / B; if it is configured, it is / a/b.
- Tag: set the type of tag to render for router link tags.
- Example:
<p>Button mode: < router link to = "/ home" tag = "button" replace > Home < / router link ></p> <p>Litag: < router link to = "/ about" tag = "Li" > about < / router link ></p> <p>Default a tag: < router link to = "/ role" tag = "a" > role < / router link ></p>
- Active class: Specifies the style of the component's class when rendering the component.
- event: declare events that can be used to trigger navigation. It can be a string or an array containing strings.
Finally, all source codes are attached.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue Routing</title> <!-- Core library --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js" type="text/javascript" charset="utf-8"></script> <!-- Router Library --> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script> </head> <body> <div id="app"> <h1>{{ts}}</h1> <!-- use RouterLink Component navigation. --> <!-- <router-link> By default, it will be rendered as a `<a>` label --> <!-- Pass in `to` Property specifies the link. --> <p>Button mode:<router-link to="/home" tag="button" replace>Home</router-link></p> <p>li label:<router-link to="/about" tag="li" >about</router-link></p> <p>default a label:<router-link to="/role" tag="a">role</router-link></p> <!-- use RouterView Component displays the specified view. --> <p><router-view></router-view></p> <!-- Specify forward and backward components and switched components --> <div> <button @click="go" type="button">forward</button> <button @click="back" type="button">back off</button> <button @click="change('/role')" type="button">Switch specified components</button> </div> </div> </body> <script type="text/javascript"> /* SPA(single page application )Single page application technology is a Web program that only loads a single HTML page and dynamically updates the content of the page. Implementation ideas and technical points: 1.ajax Asynchronous request. 2.Anchor point use. (window.loaction.hash #) */ //1.Create custom components const Home = Vue.extend({ template: '<div><h2>{{index}}</h2><div>Here is the content of the home page</div></div>', //Template data(){ return {index:'home page'} } }); const About = Vue.extend({ template: '<div><h2>{{about}}</h2><div>Here is the content</div></div>', //Template data(){ return {about:'about'}; } }); const Role = Vue.extend({ template: '<div><h2>{{role}}</h2><div>Here is the character content</div></div>', //Template data(){ return {role:'role'}; } }); //2.Define routes (and routes) const routes = [{ path:'/',//Root path, displayed by default component:Home },{ path: '/home', component: Home }, { path: '/about', component: About }, { path: '/role', component: Role }]; //3.Define router const router = new VueRouter({ routes: routes }); //establish Vue Instance and mount route var vm = new Vue({ // el:'#app ', / / use method mount mode instead router:router,//Designated router data: { ts: new Date().getTime(), index: 'Here is the home page', about: 'Here is about the page', role: 'Here is the role page', }, methods: { go(){ this.$router.go(1);//Get the current router and advance a route }, back(){ this.$router.go(-1);//Get the current router and back one route }, change(v){ this.$router.push({//Get the current route and switch to the specified component path: v }); } } }).$mount("#app");//Mount area /** * var,const,let What is the difference between the keywords of the three declared variables? */ //1.const Defined variables cannot be modified and must be initialized. /* const x;//Compilation error, constant value Missing initializer in const declaration // x = 20;//An error is reported during compilation. A constant cannot be assigned. Assignment to constant variable const y = 10;//Define and initialize, correct //y = 30;//Compilation error, constant cannot be assigned console.log(y);//Print - > 10 */ //2.var The defined variables can be modified. If they are not initialized, they will be output undefined,No error will be reported. /* var x;//Declare variable console.log(x);//You can print undefined without error console.log(y);//var The variable will raise the priority and print - > 20 var y = 20; function test(){ y = 10;//No keyword is specified. The default global variable can be accessed outside the method console.log(y);//Can print - > 10 } test();//Execution method console.log(y);//Print - > 10 */ //3.let The defined variable is a block level scope, which is used internally in the function let After definition, it has no impact on the outside of the function (the following part of compilation error is not executed). let c = 3; console.log('Out of function let definition c: ' + c);//output c=3 { let s = 20; var x = 30; } if(true){ var y = 40; let q = 50; } let arr = [1,2,3,4]; for (let i = 0; i <arr.length; i++) { var sum = arr[i]; let sums = arr[i]; } console.log(sum);//Print->4//You can access var variables // console.log(sums);//Compilation error sum is not defined console.log(y);//Print->40,explain var Declared variables can be accessed externally // console.log(q);//Compilation error is not defined console.log(x);//Print->30 // console.log(s);//Compilation error s is not defined var sa = 120; function change(){ sa = 130; c = 6; console.log('Within function let definition c: ' + c);//output c=6 } change(); console.log('After function call let definition c Not affected by function internal definition:' + c);//output c=3 console.log(sa); </script> </html>