本文详细介绍了前端路由的概念、实现原理及应用，包括基于URL hash的简单路由、VueRouter的使用、路由参数、命名路由、异步组件加载、编程式导航等高级特性。
路由
路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系，就是路由。
后端路由
概念：根据不同的用户 URL 请求，返回不同的内容
本质：URL 请求地址与服务器资源之间的对应关系
前端路由
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系
后端渲染（存在性能问题）
Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历 史的变化、但是hash的变化不会触发新的URL请求）
在实现SPA过程中，最核心的技术点就是前端路由
简易前端路由
前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）
核心实现依靠一个事件，即监听hash值变化的事件
window.onhashchange = function () {
//location.hash可以获取到最新的hash值
location.hash
}
简单的tab栏切换
<!-- 被 vue 实例控制的 div 区域 -->
<div id="app">
<!-- 切换组件的超链接 -->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
<!-- 可以把 component 标签当做是【组件的占位符】 -->
<component :is="comName"></component>
</div>
<script>
// #region 定义需要被切换的 4 个组件
// 主页组件
const zhuye = {
template: '<h1>主页信息</h1>'
}
// 科技组件
const keji = {
template: '<h1>科技信息</h1>'
}
// 财经组件
const caijing = {
template: '<h1>财经信息</h1>'
}
// 娱乐组件
const yule = {
template: '<h1>娱乐信息</h1>'
}
// #endregion
// #region vue 实例对象
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
// 注册私有组件
components: {
zhuye,
keji,
caijing,
yule
}
})
// #endregion
// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
//当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
switch(location.hash.slice(1)){
case '/zhuye':
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}
</script>
Vue Router
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
Vue Router的特性：
支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为
路由基本使用步骤
A.导入js文件
B.添加路由链接
C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
D.定义路由组件
E.配置路由规则并创建路由实例
F.将路由挂载到Vue实例中
补充：
路由重定向：可以通过路由重定向为页面设置默认展示的组件
<script src="./lib/vue.js"></script>
<!-- 1.Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router -->
<script src="./lib/vue-router_3.0.2.js"></script>
<div id="app">
<!-- 2.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性,to属性的值会被渲染为#开头的hash地址 -->
<router-link to="/zhuye">主页</router-link>
<router-link to="/keji">科技</router-link>
<router-link to="/caijing">财经</router-link>
<router-link to="/yule">娱乐</router-link>
<!-- 3.添加路由填充位（路由占位符） -->
<router-view></router-view>
</div>
<script>
//4.定义路由组件
const zhuye = { template: `<h1>主页信息</h1>` };
const keji = { template: `<h1>科技信息</h1>` };
const caijing = { template: `<h1>财经信息</h1>` };
const yule = { template: `<h1>娱乐信息</h1>` };
//5.创建路由实例
var router = new VueRouter({
//6.配置路由规则
routes: [
//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
{ path: "/", redirect: "/zhuye" },
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{ path: "/zhuye", component: zhuye },
{ path: "/keji", component: keji },
{ path: "/caijing", component: caijing },
{ path: "/yule", component: yule }
]
});
let vm = new Vue({
el: "#app",
//7.通过router属性挂载路由对象
router
});
</script>
history模式
vue-router默认是hash模式,url使用#后面的hash值定位路由,对SEO不友好,设置histroy模式可以使用普通的url模式
var router = new VueRouter({
mode:"history"
routes: [
//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
{ path: "/", redirect: "/zhuye" },
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{ path: "/zhuye", component: zhuye },
{ path: "/keji", component: keji },
{ path: "/caijing", component: caijing },
{ path: "/yule", component: yule }
]
});
嵌套路由
<div id="app">
<!-- 2.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性,to属性的值会被渲染为#开头的hash地址 -->
<router-link to="/zhuye">主页</router-link>
<router-link to="/keji">科技</router-link>
<router-link to="/caijing">财经</router-link>
<router-link to="/yule">娱乐</router-link>
<!-- 3.添加路由填充位（路由占位符） -->
<router-view></router-view>
</div>
<script>
//4.定义路由组件
const zhuye = {
template: `
<div>
<h1>主页信息</h1>
<hr>
//1. 在父组件模板中添加子级路由链接以及子级路由的占位符
<router-link to="/zhuye/hot">热门</router-link>
<router-link to="/zhuye/recommend">推荐</router-link>
<router-view />
</div>
`
};
const keji = { template: `<h1>科技信息</h1>` };
const caijing = { template: `<h1>财经信息</h1>` };
const yule = { template: `<h1>娱乐信息</h1>` };
//定义子级路由组件
const Hot = { template: `<div>热门新闻</div>` };
const Recommend = { template: `<div>推荐新闻</div>` };
//5.创建路由实例
var router = new VueRouter({
//6.配置路由规则
routes: [
//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
{ path: "/", redirect: "/zhuye" },
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{
path: "/zhuye",
component: zhuye,
//通过children属性为/zhuye添加子路由规则
children: [
{ path: "/zhuye/", redirect: "/zhuye/hot" },
{ path: "/zhuye/hot", component: Hot },
{ path: "/zhuye/recommend", component: Recommend }
]
},
{ path: "/keji", component: keji },
{ path: "/caijing", component: caijing },
{ path: "/yule", component: yule }
]
});
let vm = new Vue({
el: "#app",
//7.通过router属性挂载路由对象
router
});
路由的query参数
<router-link to="/home/news?paramsKey=paramsValue¶msKey=paramsValue">主页</router-link>
//path中写路由地址，query写参数
<router-link :to="{
path:'',
query:{}
}">主页</router-link>
//在路由组件中接受
$route.query.paramsKey
路由的params参数
路由的params参数的基本用法
<div id="app">
<router-link to="/zhuye/1">主页</router-link>
<router-view></router-view>
</div>
<script>
const zhuye = {
template: `
//路由组件中通过$route.params获取路由参数
<div>id:{{$route.params.id}}</div>
`
};
var router = new VueRouter({
routes: [
//动态路径参数 以冒号开头
{ path: '/zhuye/:id', component: zhuye }
]
});
let vm = new Vue({
el: "#app",
router
});
路由的params参数配合命名路由使用
//路由规则中必须使用占位符接收参数
routes: [
//通过name属性为路由添加一个别名
{
path: "/zhuye/:paramsKey1/:paramsKey2",
component: componentName,
name: "zhuye",
}
]
<router-link :to="/zhuye/:paramsValue1/:paramsValue2">主页</router-link>
//name中写路由名称，params写参数,对象写法必须使用命名路由
<router-link :to="{
name:'',
params:{
paramsKey1:paramsValue1,
paramsKey2:paramsValue2
}
}">主页</router-link>
//在路由组件中接受
$route.params.paramsKey
路由的props配置
props设置为对象类型传递参数
const zhuye = {
// 使用 props 接收路由参数
props: ['uname', 'age'],
template: `
<div>姓名:{{uname}}---年龄:{{age}}</div>
`
};
var router = new VueRouter({
routes: [
//如果 props 是一个对象，它会被按原样设置为组件属性
{ path: '/zhuye/:id', component: zhuye, props: { uname: '张三丰', age: 128 } }
]
});
let vm = new Vue({
el: "#app",
router
});
props设置为true
使用 r o u t e . p a r a m s . i d 来获取路径传参的数据不够灵活 , 在路由规则中设置 p r o p s : t r u e , route.params.id来获取路径传参的数据不够灵活,在路由规则中设置props:true, route.params.id来获取路径传参的数据不够灵活,在路由规则中设置props:true,route.params将会被设置为组件属性,在组件中可以设置props属性接收参数，$route.query参数传递不了
<div id="app">
<router-link to="/zhuye/1">主页</router-link>
<router-view></router-view>
</div>
<script>
const zhuye = {
// 使用 props 接收路由参数
props: ['id'],
template: `
//路由组件中通过$route.params获取路由参数
<div>id:{{id}}</div>
`
};
var router = new VueRouter({
routes: [
//动态路径参数 以冒号开头
//如果 props 被设置为 true，route.params 将会被设置为组件属性
{ path: '/zhuye/:id', component: zhuye, props: true }
]
});
let vm = new Vue({
el: "#app",
router
});
props设置为函数类型传递参数
<div id="app">
<router-link :to="{
path:'/zhuye',
query:{
id:123
}
}">主页</router-link>
<router-view></router-view>
</div>
<script>
const zhuye = {
// 使用 props 接收路由参数
props: ['id'],
template: `
<div>id:{{id}}</div>
`
};
var router = new VueRouter({
routes: [
//如果 props 是一个函数，默认接受$route参数，意味可以从$route中获取到query参数传递
{ path: '/zhuye', component: zhuye, props: $route => ({ id: $route.query.id })}
]
});
let vm = new Vue({
el: "#app",
router
});
</script>
命名路由
为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
<div id="app">
<router-link to="/zhuye/1">主页</router-link>
//添加了别名之后，可以使用别名进行跳转
<router-link :to="{name:'zhuye',params:{id:128}}">主页</router-link>
<router-view></router-view>
</div>
<script>
const zhuye = {
// 使用 props 接收路由参数
props: ["uname", "age", "id"],
template: `
<div>id:{{id}}---姓名:{{uname}}---年龄:{{age}}</div>
`
};
var router = new VueRouter({
routes: [
//通过name属性为路由添加一个别名
{
path: "/zhuye/:id",
component: zhuye,
name: "zhuye",
props: route => ({ uname: "张三丰", age: 128, id: route.params.id })
}
]
});
let vm = new Vue({
el: "#app",
router
});
命名视图
一个组件内部有多个时,可以通过命名来分配组件.
<template>
<div id="app">
<router-view></router-view>
<router-view name-"a"></router-view>
</div>
</template>
var router = new VueRouter({
routes: [
{
path: "/zhuye/:id",
components: {
defalut:zhuye,
a:Hot
},
}
]
});
异步组件(懒加载)
在配置 路由规则时,component后面不配置import的组件,而是配置一个行数
var router = new VueRouter({
routes: [
//通过name属性为路由添加一个别名
{
path: "/zhuye/:id",
component: () => {import (组件路径)},
name: "zhuye",
props: route => ({ uname: "张三丰", age: 128, id: route.params.id })
}
]
});
编程式导航
声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的 < a>< /a> 链接 或 vue 中的 < router-link></ router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的 location.href
Vue-Router中常见的导航方式：
this.$ router.push(“hash地址”);
this.$ router.push(“/zhuye”);
this.$ router.push({ name:‘zhuye’ , params: {id:100} });
this.$ router.push({ path:“/login” });
this.$ router.push({ path:“/login”,query:{username:“jack”} });
this. r o u t e r . g o ( n ) ; / / n 为数字，参考 h i s t o r y . g o t h i s . router.go( n );//n为数字，参考history.go this. router.go(n);//n为数字，参考history.gothis.router.go( -1 );
const zhuye = {
// 使用 props 接收路由参数
props: ["uname", "age", "id"],
template: `
<div>
<div>id:{{id}}---姓名:{{uname}}---年龄:{{age}}</div>
<input type="button" @click="goBack()" value="后退">
</div>
`,
methods: {
goBack: function () {
this.$router.go(-1);
}
},
};
const caijing = {
template: `
<div>
<h1>财经信息</h1>
<input type="button" @click="goZhuye()" value="跳转到主页">
</div>
`,
methods: {
goZhuye: function () {
this.$router.push({ name: 'zhuye', params: { id: 100 } });
}
},
};
keep-alive缓存路由组件
基本使用
//keep-alive可以在路由组件切换不展示后保持挂载，让组件不被销毁
//使用include控制缓存的组件，include中没有传入的组件不会被缓存。缓存多个是传入数组：include="['组件名','组件名']"
<keep-alive include="组件名">
<router-view></router-view>
</keep-alive>
});
缓存路由的两个生命周期
//路由组件所独有的两个生命钩子，用于捕获路由组件的激活状态
<keep-alive include="组件名">
<router-view></router-view>
</keep-alive>
//组件被激活时触发
activated(){}
//组件失活时触发
deactivated(){}
});
导航守卫
全局守卫
每次路由跳转,都会被触发.
全局前置守卫
router.beforeEach()注册一个全局前置守卫
const router = new VueRouter({...});
router.beforeEach((to, from, next) => {
// ...
});
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中。
每个守卫方法接收三个参数：
- to：Route：即将要进入的目标路由对象。
- from：Route：当前导航正要离开的路由。
- next：Function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。
- next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。
- next(false)：中断当前的导航。如果浏览器的URL改变了(可能是用户手动或浏览器后退按钮)，那么URL地址会重置到from路由对应的地址。
- next(‘/’)或者next({path: ‘/’})：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如replace: true、name: 'home’之类的选项以及任何用在router-link的to prop或router.push中的选项。
- next(error)：如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递
- router.onError()注册过的回调。
确保要调用next方法，否则钩子就不会被resolved。
全局解析守卫
你可以用router.beforeResolve注册一个全局守卫。这和router.beforeEach类似，区别是在导航被确认之前(跳转路由之前)，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。(beforEach调用之后被调用)
全局后置钩子
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接收next函数也不会改变导航本身。
router.afterEach((to, from) => {
// ...
})
路由独享的守卫
写在路由配置中
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {}
}
]
})
组件内的守卫
最后，你可以在路由组件内直接定义以下路由导航守卫：
//在渲染该组件的对应路由被confirm前调用
//不能获取组件实例'this',因为当守卫执行时,组件实例还有没有被创建
beforeRouteEnter(to, from, next) {
console.log('beforeRouteEnter');
next();
}
beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用,就是一个带有动态参数的路径如/foo/:id,在/foo/1和/foo/2之间跳转的时候,会调用这个钩子,可以获取组件实例’this’
beforeRouteLeave:导航离开该组件的对应路由时调用,可以访问组件实例’this’.通常用来禁止用户在还未保存修改前突然离开,可以通过next(false)来取消 .
路由守卫调用顺序
1.导航被触发
2.调用全局的beforeEach守卫
3.在重用的组件中调用beforeRouterUpdate守卫
4.在路由配置里调用beforeEnter守卫
5.在被激活的组件里调用beforeRouterEnter守卫
6.调用全局守卫beforeResolve守卫
7.导航被确认
8.调用全局的afterEach守卫
9.触发DOM更新
路由的hash模式和history模式
扫一扫
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
