Vue的学习笔记——three：Vue前端路由

Vue前端路由

路由

后端路由

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

SPA（Single Page Appliaction）

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

前端路由

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

实现简易前端路由

• 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换

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

Vue Router

官网：https://router.vuejs.org/zh/

是Vue.js 官方的路由管理器。

它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发

Vue Router包含的功能有：

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

进阶

导航守卫

过渡动效

数据获取

路由懒加载

基本使用步骤

1. 引入相关的库文件

   1. 导入vue库文件
   2. 导入vue-router库文件

2. 添加路由链接

   1. 添加router-link。是vue中提供的标签，默认渲染位a标签
      • to属性默认被渲染为href
      • 登陆

3. 添加路由填充位

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

4. 定义路由组件

   var User = {
   	template: '
   User
   '
   }
   

5. 配置路由规则并创建路由实例

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

6. 把路由挂载到Vue根实例中

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

路由重定向

路由重定向指的是：用户在访问地址A的时候，从而展示特定的组件页面

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

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

嵌套路由

嵌套路由功能分析

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

父路由组件链接

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

	User


	
	

子级路由模板

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

const Register = {
	template: `

		
 Register 组件 
		

		tab1
		tab2
		
		
		
	
`		
}

嵌套路由

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

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

动态路由匹配的基本用法

应用场景：通过动态路由参数的模式进行路由匹配

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

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

路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

1、props的值为布尔类型

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

2、props的值为对象类型

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

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