Vue 详解VueRouter路由的实现方法和重点内容，倾情打造！
文章目录
- 1 Vue路由的实现模式
-
- 1.1 hash
- 1.2 history
- 2 路由的基本概念与原理
-
- 2.1 后端路由
- 2.2 前端路由
- 2.3 实现简易前端路由
- 3 vue-router的基本使用
-
- 3.1 基本使用步骤
-
- 3.1.1 引入相关的库文件
- 3.1.2 添加路由链接
- 3.1.3 添加路由填充位
- 3.1.4 定义路由组件
- 3.1.5 配置路由规则并创建路由实例
- 3.1.6 把路由挂载到Vue实例中
- 3.1.7 完整示例
- 3.2 路由重定向
- 4 vue-router嵌套路由
-
- 4.1 嵌套路由用法
-
- 4.1.1 嵌套路由功能分析
- 4.1.2 父级路由组件模板
- 4.1.3 子级路由组件模板
- 4.1.4 嵌套路由配置
- 4.1.5 完整示例
- 5 vue-router动态路由匹配
-
- 5.1 基本使用方法
- 5.2 路由组件传递参数
-
- 5.2.1 props的值为布尔类型
- 5.2.2 props的值为对象类型
- 5.2.3 props的值为函数类型
- 5.2.4 完整示例
- 6 vue-router命名路由
-
- 6.1 命名路由的配置规则
- 7 vue-router编程式导航
-
- 7.1页面导航的两种方式
- 8 Vue-router的钩子函数
- 9 \$router与\$route的区别
-
- 9.1 $router
- 9.2 $route
1 Vue路由的实现模式
Vue的路由实现有hash模式、history 模式和abstract 模式。根据mode 参数来决定采用哪一种方式。
- hash: 使用 URL hash 值来作路由。默认模式。
- history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
- abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。
1.1 hash
即地址栏 URL 的#符号，特点：通过 window.onhashchange 的监听, 匹配不同的 url 路径，进行解析，加载不同的组件，然后动态的渲染出区域内的 html 内容，不会被包含在 HTTP 请求中,对后端完全没有影响
HashHistory 两个方法：
-
HashHistory.push（）是将路由添加到浏览器访问历史的栈顶
-
hashHistory.replace( ) 是替换掉当前栈顶的路由
因为hash 发生变化的url 都会被浏览器历史访问栈记录下来，这样一来， 尽管浏览器没有请求服务器，但是页面状态和 url 一一关联起来的，浏览器还是可以进行前进后退的。
1.2 history
利用了 HTML5 History Interface 中新增的 pushState（）和 replaceState（）方法。这两个方法应用于浏览器的历史记录栈，提供了对历史记录的修改功能。history 模式不怕页面的前进和后腿，就怕刷新，当刷新时，如果服务器没有相应的响应或者资源，就会刷出 404，而hash 模式不会
Vue路由思维导图：
2 路由的基本概念与原理
2.1 后端路由
- 概念：根据不同的用户URL请求，返回不同的内容
- 本质：URL请求地址与服务器资源之间的相应关系。
2.2 前端路由
- 概念：根据不同的用户事件，显示不同的页面内容。
- 本质：用户事件与事件处理函数之间的对应关系
2.3 实现简易前端路由
- 基于URL中的hash实现。
- 监听window的onhashchange事件。
3 vue-router的基本使用
-
介绍：Vue Router是Vue.js官方的路由管理器。
-
Vue Router包含的功能
- 支持HTML5的历史模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
3.1 基本使用步骤
- 引入相关的库文件
- 添加路由链接
- 添加路由填充位
- 定义路由组件
- 配置路由规则并创建路由实例
- 把路由挂载到Vue实例中
3.1.1 引入相关的库文件
-
导入vue文件，为全局window对象挂载Vue构造函数。
-
导入vue-router文件，为全局window对象挂载VueRouter构造函数。
-
vue文件必须在vue-router文件之前引入，顺序不能颠倒。
<script src="https://unpkg.com/vue/dist/vue.js">script> <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
3.1.2 添加路由链接
-
router-link是vue中提供的标签，默认会被渲染为a标签。
-
to属性默认会被渲染为href属性。
-
to属性的值默认会被渲染为#开头的hash地址。
<router-link to="/user">userrouter-link> <router-link to="/register">registerrouter-link>
3.1.3 添加路由填充位
-
路由填充位（也叫做路由占位符）。
-
将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置。
<router-view>router-view>
3.1.4 定义路由组件
const user = {
template:'User组件
',
};
const register = {
template:'Register组件
',
};
3.1.5 配置路由规则并创建路由实例
-
创建路由VueRouter实例对象
-
创建路由规则（配置对象）数组routes。
- 每个路由规则都是一个配置对象，其中至少包含path和component两个属性；
- path表示当前路由规则匹配的hash地址；
- component表示当前路由规则对应要展示的组件。
const router = new VueRouter({ // 路由规则 routes:[ {path:'/user',component:User}, {path:'/register',component:Register}, ] })
3.1.6 把路由挂载到Vue实例中
-
为了能够让路由规则生效，必须把路由对象挂载到Vue实例对象上。
-
router等同于router:router，是其简写形式。
const app=new Vue({ el:'#box', router, });
3.1.7 完整示例
- 源码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue的基本使用title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="box">
<router-link to="/user">userrouter-link>
<router-link to="/register">registerrouter-link>
<router-view>router-view>
div>
<script>
// 4、定义路由组件
const User = {
template:'User组件
',
}
const Register = {
template:'Register组件
',
}
// 5、配置路由规则并创建路由实例
const router = new VueRouter({
// 路由规则
routes:[
{path:'/user',component:User},
{path:'/register',component:Register},
]
})
const app=new Vue({
el:'#box',
data:{},
router,
});
script>
body>
html>
- 浏览器页面效果：
- 易错点：路由规则数组中的path值要根据情况添加斜杠"/"。
3.2 路由重定向
-
说明：表示当用户正在访问地址A的时候，强制用户跳转到地址B，展示特定组件界面。
-
方法：通过路由规则的redirect属性，指定新路由地址，即可方便的设置路由的重定向。
- path表示需要被重定向的原地址。
- redirect表示要被重定向到的新地址。
- 字符串：直接传递path路径。
- 对象：通过命名路由或path访问都可以{name:’’}。
- 函数：（参数是访问的目标路由）可以返回一个新的目标对象，替换目标路由。
const router = new VueRouter({ routes:[ {path:'/',redirect:'/user'}, {path:'/user',component:User}, {path:'/register',component:Register}, ] }) -
效果：在浏览接地址栏内输入path为"/"，按回车后，地址跳转到path为"/user"的页面。
4 vue-router嵌套路由
4.1 嵌套路由用法
-
实现方式：
-
路由配置
{ path:'', components:'', children:[], //路由配置 } -
在组件内增加路由出口
<router-view/>
-
4.1.1 嵌套路由功能分析
- 点击父级路有链接显示模板内容；
- 模板内容中又有子级路由链接；
- 点击子级路由链接显示子级模板内容。
4.1.2 父级路由组件模板
-
父级路由链接
-
父组件路由填充位
<p> <router-link to="/user">Userrouter-link> <router-link to="/register">Registerrouter-link>p><div> <router-view>div>
4.1.3 子级路由组件模板
-
子级路由链接
-
子级路由填充位
-
子级路由组件
const Register = { template:`` } //子级路由组件 const Tab1 = { template:'Register组件
Tab1 Tab2 Tab1组件
', } const Tab2 = { template:'Tab2组件
', }
4.1.4 嵌套路由配置
-
父级路由通过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}, ] }, ] })
4.1.5 完整示例
- 源码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue的嵌套路由title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="box">
<router-link to="/user">Userrouter-link>
<router-link to="/register">Registerrouter-link>
<router-view>router-view>
div>
<script>
// 4、定义路由组件
const User = {
template: 'User组件
',
}
const Register = {
template: `
Register组件
Tab1
Tab2
Tab1组件
',
}
const Tab2 = {
template:'Tab2组件
',
}
// 5、配置路由规则并创建路由实例
const router = new VueRouter({
// 路由规则
routes: [
{ path: '/', redirect: '/user' },
{ path: '/user', component: User },
{
path: '/register',
component: Register,
//通过children属性，为/register添加子级路由规则
children: [
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 },
]
},
]
});
const app = new Vue({
el: '#box',
data: {},
router,
});
script>
body>
html>
- 浏览器页面效果：
5 vue-router动态路由匹配
5.1 基本使用方法
-
应用场景：通过动态路由参数的模式进行路由匹配。
-
动态路径参数以冒号":"开头。
-
路由组件中通过$route.params获取路由参数。
const User = { //获取路由参数 template: 'User{{$route.params.id}}组件
', }const router = new VueRouter({ routes: [ //动态路由参数 { path: '/user/:id', component: User }, ] });
-
5.2 路由组件传递参数
- $route与对应路由形成高度耦合，灵活性差，所以可以使用props将组件和路由解耦。
5.2.1 props的值为布尔类型
- 若props:true时，route.params将会被设置为组件属性。
- 使用props接收路由参数。
- 直接使用路由参数。
const User = { //获取路由参数 props:['id'], template: 'User{{id}}组件
',}
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User,props:true}, ]});
5.2.2 props的值为对象类型
- 若props:{}是一个对象，它会被原样设置为组件属性。
- 对props指定静态数据对象。
- 对象中有什么数据，组件中才能使用什么数据。
const User = { //获取路由参数 props:['uname','age'], template: '用户信息：{{uname + '---' + age}}
',}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,props:{uname:'Silly',age:20}},
]
});
5.2.3 props的值为函数类型
- 若props:route=>({})是一个函数，则此函数接收动态参数对象route为自己的形参，参数项与参数值数量对应。
- 把动态参数与静态参数结合起来。
- 函数体内返回一个props对象，对象内可以写静态参数和动态参数。
const User = {
//获取路由参数
props:['id','uname','age'],
template: '用户信息：{{id + '
---' + uname + '---' + age}}',
}
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
//函数里面返回一个props对象
props:route=>({
uname:'Silly',
age:20,
id:route.params.id
})
},
]
});
5.2.4 完整示例
- 源码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue的动态路由匹配title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="box">
<router-link to="/user/1">User1router-link>
<router-link to="/user/2">User2router-link>
<router-link to="/user/3">User3router-link>
<router-link to="/register">Registerrouter-link>
<router-view>router-view>
div>
<script>
// 4、定义路由组件
const User = {
//获取路由参数
// props: ['id'],
props: ['id','uname','age'],
template: '组件---用户id：{{id}}---姓名：{{uname}}---年龄{{age}}
',
}
const Register = {
template: 'Register组件
',
}
// 5、配置路由规则并创建路由实例
const router = new VueRouter({
// 路由规则
routes: [
{ path: '/', redirect: '/user' },
//props为布尔类型
/* { path: '/user/:id', component: User, props:true},*/
//props为对象类型
/* {
path: '/user/:id',
component: User,
props:{uname:'Silly',age:20}
}, */
//props为函数类型
{
path: '/user/:id',
component: User,
// 函数体内返回一个props对象
props:route => ({
uname:'Silly',
age:20,
id:route.params.id,
})
},
{ path: '/register', component: Register },
]
})
const app = new Vue({
el: '#box',
data: {},
router,
});
script>
body>
html>
- 浏览器页面效果：
6 vue-router命名路由
6.1 命名路由的配置规则
- 给路由规则起一个别名，即为命名路由。
- 方便表示路由的路径，帮助实现路由跳转。
- name表示要跳转的的路由名称。
- params给路由传递参数。
<router-link :to="{name:'user',params:{id:3}}">User3router-link>
const router = new VueRouter({
// 路由规则
routes: [
{ path: '/', redirect: '/user' },
//命名路由
{
name:'user',
path: '/user/:id',
component: User,
props:route => ({
uname:'Silly',
age:20,
id:route.params.id,
})
},
{ path: '/register', component: Register },
]
})
7 vue-router编程式导航
7.1页面导航的两种方式
-
常用的编程式导航API
- this.$router.push(‘hash地址’) --------- 直接跳转
- this.$router.go(数值) --------- 步进步退
- this.$router.replace() ---------
const User = { //获取路由参数 props: ['id', 'uname', 'age'], template: ``, methods:{ goRegister(){ //直接跳转到register this.$router.push('/register'); }, }, }组件---用户id：{{id}}---姓名：{{uname}}---年龄{{age}}
const Register = { template: ``, methods:{ goBack(){ //往后退一步 this.$router.go(-1); }, }, }Register组件
-
.push()方法
//字符串（路径名称） router.push('/home') //对象 router.push({path:'/home'}) //命名的路由（传递参数） //name命名路由，路由项里面的name值 router.push({name:'/user',params:{userId:1}}) //带查询参数，变成/register?name=Silly //query值为json对象 router.push({path:'/register',query:{uname:'Silly'}})- 参数传递注意事项：
- path或name，都可以使用query传递参数，参数会显示在路径上。
- path不能使用params传递参数。
- name可以使用params传递参数，且参数内容不会显示在路径上（类似于请求体）。
- 在传递大量参数时，推荐使用命名路由name的形式加params传递参数。
- 参数传递注意事项：
-
.go()方法
router.go({name:'/user',query:{uname:'Silly'}})- 直接跳转，传递参数数字，正数前进，负数后退。
-
.replace()方法
router.replace({name:'/user',query:{uname:'Silly'}})- 直接替换当前路径，不会向history添加记录（不能回退）。
8 Vue-router的钩子函数
- 全局前置守卫 router.beforeEach(to,from,next)
- 全局解析守卫 router.beforeResolve
- 全局后置守卫 router.afterEach
- 路由独享守卫 beforeEnter
- 组件内的守卫 beforeRouteEnter 、 beforeRouteUpdate 、 beforeRouteLeave
参数：有 to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）
9 $router与$route的区别
9.1 $router
r o u t e r 为 V u e R o u t e r 实 例 。 想 要 导 航 到 不 同 U R L ， 则 使 用 router 为 VueRouter 实例。想要导航到不同 URL，则使用 router为VueRouter实例。想要导航到不同URL，则使用router.push方式，返回上一个
history 也是使用$router.go 方法
9.2 $route
$route 从当前 router 跳转对象里面可以获取 name、path、query、params 等。