Vue study notes-three: Vue front-end routing

Vue front-end routing

routing

Backend routing

• Concept: According to different user URL requests, different content is returned
• Essence: the correspondence between the URL request address and server resources

SPA（Single Page Appliaction）

• Back-end rendering (with performance issues)
• Ajax front-end rendering (front-end rendering improves performance, but does not support browser forward and backward operations)
• SPA (Single Page Application) single page application, the entire website has only one page, internal changes are realized through Ajax partial update, and it supports the forward and backward operations of the browser address bar
• One of the principles of SPA implementation: hash based on URL address (changes in hash will cause the browser to record changes in the access history, but changes in hash will not trigger new URL requests)
• In the process of implementing SPA, the core technical point is front-end routing

Front-end routing

• Concept: According to different user events, display different page content
• Essence: the correspondence between user events and event handling functions

Implement simple front-end routing

• Implementation based on the hash in the URL (change the hash of the URL when the menu is clicked, and control the switching of the components according to the change of the hash

//监听window的 onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
window.onhashchange = function(){
	//通过location.hash获取到最新的hash值
}

Router view

Official website: https://router.vuejs.org/zh/

It is the official route manager of Vue.js.

It is deeply integrated with the core of Vue.js and can be used for the development of SPA applications very conveniently

The functions included in Vue Router are:

• Support HTML5 history template or hash mode
• Support nested routing
• Support routing parameters
• Support programmatic routing
• Support named routing

Advanced

Navigation guard

Transition effect

data collection

Route lazy loading

Basic steps

1. Introduce related library files

   1. Import vue library file
   2. Import the vue-router library file

2. Add routing link

   1. Add router-link. Is the tag provided in vue, the default rendering is the a tag
      • The to attribute is rendered as href by default
      • <router-link to="/login" tag="button">登陆</router-link>

3. Add routing padding

   1. Add router-view. In the future, components matched by routing rules will be rendered to the location of router-view

4. Define routing components

   var User = {
   	template: '<div>User</div>'
   }
   

5. Configure routing rules and create routing instances

   //创建路由实例对象
   var router = new Router({
   	// routes 是路由规则数组
   	routes: [
   		// 每个路由规则都是一个配置对象，至少包含 path和component两个属性：
   		// path 表示当前路由规则匹配的hash地址
   		// component表示当前路由对应要展示的组件
   		{path: '/user', component: User}
   		{path: 'register', component: register},
   	]
   })
   

6. Mount the route to the Vue root instance

   new Vue({
   	el: '#app',
   	// 为了能够路由规则生效，必须把路由对象挂载到vue实例对象上
   	router
   });
   

Route redirection

Routing redirection refers to: when a user visits address A, a specific component page is displayed

Through the redirect attribute of the routing rule, specify a new routing address, you can easily set the redirection of the route

var router = new VuewRouter({
	routes: [
		//其中。path表示需要被重定向的原地址，redirect表示将要被重定向的新地址
		{path: '/', redirect: '/user'},
		{path: '/user', component: User},
	]
})

Nested routing

Analysis of Nested Routing Function

• Click the parent route link to display the template content
• There are child routing links in the template content
• Click the child routing link to display the content of the child template

Parent routing component link

• Parent route link
• Parent component routing fill

<p>
	<router-link to='/user'>User</router-link>
</p>
<div>
	<!--控制组件的显示位置-->
	<router-view></router-view>
</div>

Child routing template

• Child routing link
• Child routing padding

const Register = {
	template: `<div>
		<h1> Register 组件 </h1>
		<hr/>
		<router-link to="/register/tab1">tab1</router-link>
		<router-link to="/register/tab2">tab2</router-link>
		
		<!--- 子路由填充位置 -->
		<router-view/>
	</div>`		
}

Nested routing

• The parent route configures the child route through the children attribute

const router = new Router({
	routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      //通过children 属性，为/index 添加子路由
      children: [
        {path: 'register', component: register},
        {path: 'login', component: login},
      ]
    },
})

Basic usage of dynamic route matching

Application scenario: route matching through the pattern of dynamic routing parameters

var router = new VueRouter({
	routes: [
		//动态路径参数，以冒号开头
		{path: '/user/:id', component: User}
	]
})

const User = {
	//路由组件中通过$route.params 获取路由参数
	template: '<div>User {
   
   { $route.params.id }}</div>'
}

Routing components pass parameters

$route is highly coupled with the corresponding route and is not flexible enough, so you can use props to decouple components and routes

1. The value of props is boolean

const router = new Router({
	routes: [
		//如果props 被设置为 true， route.params 将会被设置为组件属性
		{path: '/user/:id', component: User, props: true }
	]
})
const User = {
	props: ['id'],  // 使用props 接收路由参数
	template: `<div> 用户信息： {
   
   { id }} </div> `  //使用路由参数
}

2. The value of props is the object type

const router = new VueRoter((
	routes: [
		//如果props是一个对象，它会被按原样设置为组件属性
		{path: '/user/:id', component: User, props: { uname: 'lili', age: 18}}
	]
))

const User = {
	props: ['uname', 'age'],
	template: `<div> 用户信息： {
   
   { uname + '-----' +age}} </div> `
}