VUE基础学习笔记——05路由

一、路由的基本概念与原理

1、后端路由

后端路由 根据不同的URL地址分发不同的资源

• 概念：根据不同的用户 URL 请求，返回不同的内容
• 本质：URL 请求地址与服务器资源之间的对应关系

2、SPA（Single Page Application）

• 后端渲染（存在性能问题）
• Ajax 前端渲染（提高性能，但是不支持浏览器的前进后退操作）
• SPA单页面应用程序：网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
• SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）
• 在实现SPA过程中，最核心的技术点就是前端路由

3、前端路由

前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容

• 概念：根据不同的用户事件，显示不同的页面内容
• 本质：用户事件与事件处理函数之间的对应关系

4、Vue Router

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

Vue Router 包含的功能有：

• 支持HTML5历史模式或 hash 模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

二、vue-router 的基本使用

1、基本使用步骤

1.1、引入相关的库文件

<!--导入 vue文件，为全局window对象挂载Vue构造函数-->
<script src="vue/vue.js"></script>

<!--导入 vue-router 文件，为全局window对象挂载 vueRouter构造函数-->
<script src="vue/vue-router.js"></script>

1.2、添加路由链接

• router-link 是vue中提供的标签，默认会被渲染为 a标签
• to 属性默认会被渲染为 href 属性
• to 属性的值会被默认渲染为 #开头的 hash 地址

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

1.3、添加路由填充位（路由占位符）

将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置

<router-view></router-view>

1.4、定义路由组件

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

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

1.5、配置路由规则并创建路由实例

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

1.6、把路由挂载到 Vue根实例中

new Vue({
	el:'app',
	router: router	//挂载实例对象，可简写成router（属性名和属性值一致）
})

2、路由重定向

• 用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面
• 通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

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

3、嵌套路由用法

3.1、嵌套路由功能分析

• 点击父级路由链接显示模板内容
• 模板内容中又有子级路由链接
• 点击子级路由链接显示子级模板内容

3.2、父路由组件模板

• 父路由链接
• 父组件路由填充位

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

3.3、子级路由组件模板

• 子级路由链接
• 子级路由填充位

const Register = {
	template:`
		<div>
			<h1>Register 组件</h1>
			<router-link to="/register/tab1">Tab1</router-link>
			<router-link to="/register/tab2">Tab2</router-link>

			<router-view></router-view>
		</div>
	`
}

3.4、嵌套路由配置

• 父级路由通过children属性配置子级路由

const router = new VueRouter({
	routes:[
		{path:'/user',component:User},
		{
			path:'/register',
			component:Register,
			children:[	//通过children属性，为/register添加子路由规则
				{path:'/register/tab1',component:Tab1},
				{path:'/register/tab2',component:Tab2}
			]
		}
	]
})

4、动态路由匹配

• 通过动态路由参数的模式进行路由匹配

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

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

• 路由组件传递参数
  $route与对应路由形成高度耦合，不够灵活，可以使用props将组件解耦

//1、props 的值为布尔类型
const router = new VueRouter({
	routes:[
		{
			path:'/user/:id',
			component:User,
			props:true	//如果props被设置为true，router.params将会被设置为组件属性
		}
	]
})

const User = {
	props:['id'],	//使用props接收路由参数
	template:'<div>用户id：{{id}}</div>'	//使用路由参数
}



//2、props 的值为对象类型
const router = new VueRouter({
	routes:[{
		path:'/user/:id',
		component:User,
		props:{
			umane:'lisi',
			age:12
		}
	}]
})

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



//3、props 的值为函数类型
const router = new VueRouter({
	routes:[{
		path:'/user/:id',
		component:User,
		props:route=>({
			uname:'lisi',
			age:20,
			id:route.params.id
		})
	}]
})

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

5、命名路由的配置规则

• 为了更方便的表示路由的路径，可以给路由规则器一个别名，即为“命名路由”

const router = new VueRouter({
	routes:[
		{
			path:'/user/:id',
			name:'user',	//命名路由
			component:User
		}
	]
})

<router-link :to="{ name: 'user', params: {id:123}}">User</router-link>	//name代表要跳转到的命名路由，params代表参数
router.push({name: 'user', params: {id:123}})

6、编程式导航

6.1、页面导航的两种方式

• 声明式导航：通过点击链接实现导航的方式，叫做声明式导航
  例：普通网页中的标签链接或vue中

• 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
  例：普通网页中的location.href

6.2、编程式导航基本用法

常用编程式导航API

• this.$router.push(‘hash地址’)
• this.$router.go(n)

const User = {
	template: '<div><button @click="goRegister">跳转到Register页面</button></div>'
	methods:{
		goRegister:function(){
			this.$router.push('/register');	//用编程的方式控制路由跳转
		}
	}
}

const Register = {
	template: '<div><button @click="goBack">后退</button></div>'
	methods:{
		goBack:function(){
			this.$router.go(-1);	//用编程的方式控制路由跳转
		}
	}
}

6.3、编程式导航参数规则

• router.push()方法的参数规则

router.push('/hone')
router.push({path:'/home'})
router.push({name:'user',params:{userId:123}})	//命名路由
router.push({path:'/user',query:{uname:'lisi'}})	//带查询参数，变成/user?uname=lisi