Vue全家桶之前端路由
目录
1.Vue全家桶之前端路由
1.1路由的基本概念和原理
1.1.1路由
1.路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。
2.路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现，并完成资源的分发
2).前端路由是依靠hash值(锚链接)的变化进行实现
1.1.2后端路由
1.概念：根据不同的用户URL请求，返回不同的内容
2.本质：URL请求地址与服务器资源之间的对应关系
1.1.3SPA
1.后端渲染（存在性能问题）
2.Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
3.SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进后退操作
4.SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash变化不会触发新的URL请求）
5.实现SPA最核心的技术是前端路由
1.1.4前端路由
1.概念：根据不同的用户事件，返回不同的页面内容
2.本质：用户事件与事件处理函数之间的对应关系
3.初体验：前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）
核心实现依靠一个事件，即监听hash值变化的事件
```
window.onhashchange = function(){
//location.hash可以获取到最新的hash值
location.hash
}
```
4.前端路由实现tab栏切换：
1.2 Vue Router的基本使用
1.2.1 简介
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
1.2.2功能特性
1.支持H5历史模式或者hash模式
2.支持嵌套路由
3.支持路由参数
4.支持编程式路由
5.支持命名路由
6.支持路由导航守卫
7.支持路由过渡动画特效
8.支持路由懒加载
9.支持路由滚动行为
1.2.3Vue Router的使用步骤(★★★)
A.导入js文件
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
B.添加路由链接
<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
<router-view></router-view>
D.定义路由组件
var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }
E.配置路由规则并创建路由实例
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{path:"/user",component:User},
{path:"/login",component:Login}
]
})
F.将路由挂载到Vue实例中
new Vue({
el:"#app",
//通过router属性挂载路由对象
router:myRouter
})
1.2.4路由重定向
可以通过路由重定向为页面设置默认展示的组件
在路由规则中添加一条路由规则即可，如下：
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
{ path:"/",redirect:"/user"},
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
1.3 Vue Router嵌套路由
1.3.1概念
当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。
嵌套路由最关键的代码在于理解子级路由的概念：
比如我们有一个/login的路由
那么/login下面还可以添加子级路由，如:
/login/account
/login/phone
1.3.2 功能分析
点击父级路由链接显示模板内容，模板内容中又有子级路由链接，点击子级路由链接显示子级模板内容
1.3.3 父路由组件模板
l 父级路由链接 l 父组件路由填充位
<p>
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
</p>
<div>
<!-- 控制组件的显示位置 -->
<router-view></router-view>
</div>
1.3.4子级路由模板
l 子级路由链接 l 子级路由填充位
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>`
}
1.3.5 嵌套路由配置
l 父级路由通过children属性配置子级路由
const router = new VueRouter({
routes: [
{ path: '/user', component: User },
{
path: '/register',
component: Register,
// 通过 children 属性，为 /register 添加子路由规则
children: [
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
]
}
]
})
1.4Vue Router动态路由匹配
1.4.1 动态匹配路由的基本用法
应用场景：通过动态路由参数的模式进行路由匹配
var router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
const User = {
// 路由组件中通过$route.params获取路由参数
template: '<div>User {{ $route.params.id }}</div>'
}
1.4.2 路由组件传递参数
$route（$route.params.id）与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
1.props的值为布尔类型
我们可以通过props来接收参数
2.props的值为对象类型
我们可以将props设置为对象，那么就直接将对象的数据传递给
组件进行使用
3.props的值为函数类型
如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为
函数形式。
1.5 Vue Router命名路由
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
1.6 Vue Router编程式导航
1.6.1页面导航的两种方式
1.声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link>
2.编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的 location.href
1.6.2 编程式导航基本用法
常用的编程式导航 API 如下：
this.$router.push('hash地址')
this.$router.go(
1.6.3编程式导航参数规则
router.push() 方法的参数规则