Vue全家桶-前端路由
一、路由的基本概念与原理
1.路由:是一个比较广义和抽象的概念，路由的本质就是对应关系。
开发中，分为后端路由和前端路由。
①后端路由:根据不同的用户URL请求，返回不同的内容。
本质:URL请求地址与服务器资源之间的对应关系。
②SPA
后端路由渲染(存在性能问题)。
Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作)。
SPA单页面应用程序:整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进的后退操作。
SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、hash的变化不会触发新的URL请求)。
在实现SPA过程中，最核心的技术点就是前端路由。
③前端路由:根据不同的用户事件，显示不同的页面内容。
本质:用户事件与事件处理函数之间的对应关系。
④实现简易前端路由
基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)
//监听window的onhashchange事件，根据获取得到的最新hash值，切换要显示的组件的名称
window.onhashchange = function () {
//通过location.hash 获取到最新的hash值
}
2.Vue Router
Vue Router 是vue.js官方的路由管理器。
它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
vue Router 包含功能有:
支持HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
二、vue-router的基本使用
1.基本使用步骤
①引入相关库文件
导入vue文件，为全局window对象vue构造函数
<script src="./lib/vue_2.5.22.js"></script>
导入vue-router文件，为全局window对象挂载VueRouter构造函数
<script src="./lib/vue-router_3.0.2.js"></script>
②添加路由链接
router-link是vue中提供的标签，默认会被渲染为a标签
to属性默认会被渲染成href属性
to属性的默认值会被渲染成#开头的hash地址
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
③添加路由填充位
路由填充位，也叫路由占位符
将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
<router-view></router-view>
④定义路由组件
var User = {
template: '<div>User</div>'
}
var Register = {
template: '<div>Register</div>'
}
⑤配置路由规则并创建路由实例
//创建路由实例对象
var Router = new VueRouter({
//routes是路由规则数组
routes:[
//每个路由规则都是一个配置对象，其中至少包含path和component 两个属性:
// path表示当前路由规则匹配的 hash地址
// component表示当前路由规则对应要展示的组件
{path:'/user',component:User},
{path:'/register',component:Register}
]
})
⑥把路由挂载到Vue根实例中
new Vue({
el: '#app',
router
});
2.路由重定向
指的是用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面，通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向:
var router = new VueRouter({
routes:[
//其中path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
{path:'/',redirect : '/user'},
{path:'user',component:User},
{path:'/register',component:Register}
]
})
三、vue-router嵌套路由
1.嵌套路由用法
①嵌套路由功能分析
点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子集模板内容
②父路由组件模板
父级路由链接
父组件路由填充位
<p>
<router-link to="/user">User<router-link>
<router-link to="register">Register<router-link>
</p>
<div>
控制组件的显示位置
<routet-view><router-view>
</div>
③子级路由模板
子级路由链接
子集路由填充位
const Register = {
template : `<div>
<h1>Register 组件</h1>
<hr/>
<routet-link to="/register/tab1">Tab1</routet-link>
<routet-link to="/register/tab2">Tab2</routet-link>
子路由填充位置
<router-view/>
</div>`
}
④嵌套路由配置
父级路由通过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}
]
}
]
})
四、vue-router动态路由匹配
1.动态匹配路由的基本用法
思考:
有如下三个路由链接
<router-link to="/user1">User1<router-link>
<router-link to="/user2">User2<router-link>
<router-link to="/user3">User3<router-link>
//定义如下三个对应的路由规则，是否可行?
{path:'/user1',component:User}
{path:'/user2',component:User}
{path:'/user3',component:User}
应用场景:通过动态路由参数的模式进行路由匹配
var router = new VueRouter({
routes: [
//动态路径参数，以冒号开头
{path : '/user/:id', component:User}
]
})
const User = {
//路由组件中通过$router.params获取路由参数
template : '<div>User {{ $router.params.id}}</div>
}
2.路由组件传递参数
$routet与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。
①props的值是布尔类型
const router = new VueRouter({
routes : [
//如果props被设置为true,routet.params将会设置为组件属性
{path:'/user/:id', component : User, props:true}
]
})
const User = {
props:['id'],//使用props接收路由参数
template : '<div>用户ID: {{ id }}</div>' //使用路由参数
}
②props的值为对象类型
const router = new VueRouter({
routes : [
//如果props是一个对象,它会被按原样设置为组件属性
{path:'/user/:id', component : User, props:{ uname:'li',age:20}}
]
})
const User = {
props:['uname','age:],
template : `<div>用户信息: {{ uname +'---'+ age }}</div>`
}
③props的值为函数类型
const router = new VueRouter({
routes : [
//如果props是一个函数，则这个函数接收router对象为自己的形参
{path:'/user/:id',
component : User,
props: router => ({ uname:'zs', age: 20, id : router.params.id})}
]
})
const User = {
props:['uname' 'age','id'],
template : `<div>用户信息: {{ uname +'---'+ age + '---' + id}}</div>`
}
五、vue-router命名路由
1.命名路由的配置规则
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为'命名路由'。
const router = new VueRouter({
routes : [
{path:'/user/:id',
name: :'user'
component : User
}
]
})
<router-link :to="{ name : 'user', params : { id : 123}}">User<router-link>
routet.push({ name:'user', params : { id :123}})
六、vue-router编程式导航
1.页面导航的两种方式
声明式导航:通过点击链接实现导航的方式。
例如:普通网页中的a链接，或者vue中的router-link标签
编程式导航:通过调用JavaScript形式的Api实现导航的方式
例如:普通网页中的location.href
编程式导航基本用法:
常用的编程式导航API如下
this.$router.push('hash地址')
this.$router.go(n)
const User ={
template : '<div><button @click="goRegistet">跳转到注册页面</button></div>
methods : {
goRegister : function () {
//用编程的方式控制路由跳转
this.$router.push('/register');
}
}
}
2.编程式导航参数规则
router.push()方法的参数规则
//字符串(路径名称)
router.push('/home')
//对象
router.push({ path : '/home'})
//命名的路由(传递参数)
router.push({ name : '/user', params : { userId : 123}})
//带查询参数，变成/register?uname=lisi
router.push({ path : '/register', query : { uname : 'lisi'}})
七、基于vue-routet的案例
后台管理路由案例
用到的路由技术要点:
路由的基本用法，
嵌套路由，
路由重定向，
路由传参，
编程式导航
