vue router

1. SPA is what
single-page Web applications (single page application, SPA), the application is only a Web page
is to load a single HTML page, and dynamically update the Web page of the application when a user interacts with the application

Single-page application:
only the first page will load, after each request, only the necessary data is then parsed by the page data acquired js show on the page.
Traditional multi-page applications:
the traditional multi-page applications, each request returned by the server is a complete page of

the advantages of
reducing the volume of requests and speed up page response times, reduce the pressure on the server
better user experience, allowing users to feel native app in the web app smooth

2. SPA implement ideas and technical points
. 1 Ajax
2 using anchor (the window.location.hash #)
. 3 hashchange event window.addEventListener ( "hashchange", function ( ) {})
value change anchor event listener 4, in accordance with different anchor values, corresponding to the request data is
5 originally used as an internal page to jump to locate and display the corresponding content

Routing ideas
1, to ensure the introduction of js dependent Vue.vue-router
2, first need to define the components (that is, to show the effect of different pages)
3, different components into a vessel needs to be (route set)
4, the route set assembly into the router
5, the route mount Vue example
6, defines the anchor
7, the jump

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 1、确保引入Vue和vue-router的js依赖 -->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<!-- 6、定义锚点 7、跳转 -->
					<router-link to="/Home" replace>go to Home</router-link>
					<router-link to="/About">go to About</router-link>
				</li>
				<li>
					<!-- 使用RouterView组件显示. -->
					<Router-View> </ Router-View> 
				</ Li> 
			</ UL> 
		</ div> 

	</ body> 
	<Script type = "text / JavaScript"> 
		/ * 2, first need to define the components (that is, exhibit different results page) * / 
		const = Home Vue.extend ({ 
			Template: '<div> <P> this is a Home component </ p> <div> Home component contents </ div> </ div>' 
		}); 

		const = Vue.extend About ({ 
			Template: '<div> <P> this is a component About </ p> <div> About assembly SUMMARY </ div> </ div>' 
		}); 
		/ * 
		. 3, different needs the assembly is placed in a container (route set) 
		 * / 
		var routes = [{ 
				path: '/ Home', 
				component: Home 
			}, 
			{ 
				path: '/ The About ', 
				Component: the About, 
			} 
		]; 
		/ *. 4, the router will route set assembled into * /
		= new new Router VueRouter the let ({ 
			routes
		});
		new new Vue ({ 
			EL: '#app', 
			/ *. 5, the route mount Vue instance * / 
			Router, 
			Data () { 
				return { 
					MSG: 'VUE assembly' 
				} 
			} 
		} ) 
	</ Script> 
</ HTML>

　　Show

replace
settings replace attributes, when clicked, will call router.replace () instead router.push (), does not leave history after record navigation.
<router-link: to = " {path: '/ home'}" replace> </ router-link>

There is backsliding is not set replace:

One by one out

Set replace phenomenon:

The second home will put in the time to get rid of about (here, the home is set replace)

Guess you like