本文介绍了前端路由的基本概念，包括后端路由、SPA（Single Page Application）和前端路由的原理。重点讲解了Vue Router，它是Vue.js官方的路由管理器，支持HTML5历史模式、嵌套路由、动态匹配和编程式导航等特性。详细阐述了vue-router的基本使用、路由重定向、嵌套路由、动态匹配、组件间参数传递、命名路由以及编程式导航的多种用法。
1. 路由的基本概念与原理
路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
在开发中，路由分为： 前端路由 和 后端路由。
1.1 后端路由
- 概念：根据不同的
用户URL请求，返回不同的内容 - 本质：
URL请求地址与服务器资源之间的对应关系
1.2 SPA（Single Page Application）
- 后端渲染（存在性能问题，如果频繁提交表单行为，后端路由会造成网页的频繁刷新，导致体验差）
- Ajax前端渲染（前端渲染提高性能，但是
不支持浏览器的前进后退操作） - SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时
支持浏览器地址栏的前进和后退操作 - SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求）——
此hash指url尾巴后的#号以及后面的字符。hash也称锚点或锚链接 - 在实现SPA过程中，
最核心的技术点就是前端路由
1.3 前端路由
- 概念：根据不同的
用户事件，显示不同的页面内容 - 本质：
用户事件和事件处理函数之间的对应关系
1.4 实现简易前端路由
基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
<!DOCTYPE html>
<html>
<head>
<title>实现简易前端路由</title>
</head>
<body>
<div id="app">
<div class="top">
<!-- 切换组件的超链接 -->
<a href="#/zhou">周周</a>
<a href="#/geren">个人</a>
<a href="#/biji">笔记</a>
<a href="#/yule">娱乐</a>
<div>
<!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
<!-- 可以把 component标签 看做是【组件的占位符】 -->
<component :is="comName"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
// #region 定义需要被切换的4个组件
const zhou = {
template: '<h1>主页信息</h1>'
}
const geren = {
template: '<h1>个人信息</h1>'
}
const biji = {
template: '<h1>笔记信息</h1>'
}
const yule = {
template: '<h1>娱乐信息</h1>'
}
// #region vue 实例对象
const vm =new Vue({
el:"#app",
data:{
comName: 'zhou'
},
// 注册私有组件
components: {
zhou,
geren,
biji,
yule
}
})
//监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function(){
//通过location.hash获取到最新的hash值
console.log(location.hash)
switch(location.hash.slice(1)){
case '/zhou':
vm.comName = 'zhou'
break
case '/geren':
vm.comName = 'geren'
break
case '/biji':
vm.comName = 'biji'
break
case '/yule':
vm.comName = 'yule'
break
}
}
</script>
</body>
</html>
2. Vue Router
Vue Router 是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router 包含的功能有：
- 支持HTML5历史模式或 hash 模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
2.1 vue-router的基本使用
- (1) 引入相关库文件，注意
先引入vue.js再引入vue-router.js - (2) 添加路由链接
<!-- router-link 是vue中提供的标签，默认会被渲染为 a标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
- (3) 添加路由填充位
<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置 -->
<router-view></router-view>
- (4) 定义路由组件
var User = {
template:'<div>User</div>'
}
var Register = {
template:'<div>Register</div>'
}
- (5)
配置路由规则并创建路由实例
// 创建路由实例
var router = new VueRouter({
// routes 是路由规则数组
routes:[
// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性
// path 表示当前路由规则匹配的 hash 地址
// component 表示当前路由规则对应要展示的组件
{path:'/user', component:User},
{path:'/register', component:Register}
]
})
- (6) 把路由挂载到Vue根实例中
new Vue({
el:'#app',
// 为了能够让路由规则生效，必须把路有对象挂载到vue实例对象中
router
})
2.2 路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组建页面；
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
var router = new VueRouter({
routes:[
// 其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
{path:'/', redirect:'/user'},
{path:'/user', component:User},
{path:'/register', component:Register}
]
})
// 它的应用场景就是：比如我们需要输入网站根目录就可以显示首页内容，就可以这样进行重定向操作。
2.3 嵌套路由
(1) 在父组件中写上子路由链接和子路由的占位符，子路由对应的组件也要注册好。
(2) 如果是在register组件中写上子路由的话，可以加上<router-link to="/register/tab1">tab1</router-link>和<router-view />
(3) 子路由规则中用children:[]这样的一个数组来表示。
// children数组表示子路由规则
{ path:'/register', component:register, children:[
{ path:'/register/tab1', component:tab1 }
]}
2.4 动态匹配路由的基本用法
应用场景：通过动态路由参数的模式进行路由匹配
var router = new VueRouter({
routes:[
// 动态路径参数 以冒号开头
{ path:'/user/:id', component:User }
]
})
const User = {
// 路由组件中通过 $route.params 获取路由参数
template:'<div>User {{ $route.params.id }}</div>'
}
2.5 路由组件传递参数
$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
2.5.1 props的值为布尔类型
const router = new VueRouter({
routes:[
// 如果props被设置为true，route.params将会被设置为组件属性
{ path:'/user/:id', component:User, props:true }
]
})
const User = {
props: ['id'], // 使用props接收路由参数
template: '<div>用户ID: {{ id }}</div>' // 使用路由参数
}
2.5.2 props的值是对象类型
const router = new VueRouter({
routes:[
// 如果 props 是一个对象，它会被按原样设置为组件属性
{ path:'/user/:id', component:User, props:{ uname:'zhou',age:12 } }
]
})
const User = {
props:{'uname','age'}
template:'<div>用户信息：{{uname + '------' + age}}</div>'
}
// 此时这里的 id 相当于没用了，就算template加上{{id}}也不会显示。
2.5.3 props的值是函数类型
const router = new VueRouter({
routes:[
// 如果 props 是一个函数，则这个函数接收的 route 对象为自己的形参
{ path:'/user/:id',
component:User,
props:route=>({uname:'zly', age:20, id:route.params.is}) //这个route是动态参数对象，右侧是函数体，在函数体中可以return一个props对象(里面可以有静态参数和动态参数)
}
]
})
const User = {
props: ['uname', 'age', 'id'],
template:'<div>用户信息：{{uname + '----' + age + '----' + id}}</div>'
}
这样的话id，uname，age都可以显示在页面上了！
2.6 vue-router命名路由
2.6.1 命名路由的配置规则
为了更加方便地表示路由的路径，可以给路由规则起一个别名，即为"命名路由"。
const router = new VueRouter({
routes:[
{
path: '/user/:id',
name: 'user',
component: User
}
]
})
// 可以通过 name 属性来跳转到指定页面
<router-link :to="{name:'user', params:{id:123}}"></router-link>
router.push({name:'user', params:{id:123}})
2.7 vue-router编程式导航
2.7.1 页面导航的两种方式
-
声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的链接或vue中的 -
编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的location.href
2.7.2 编程式导航基本用法
常用的编程式导航API如下：
- this.$router.
push( ‘hash地址’ ) - this.$router.
go(n)
const User = {
template:'<div><button @click="goRegister">跳转到注册页面</button></div>'
methods:{
goRegister:function(){
// 用编程的方式控制路由跳转
this.$router.push('/register')
}
}
}
2.7.3 编程式导航参数规则
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'} })
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
