vue路由
路由：主要是可以实现单页面应用
路由及工作原理介绍
-
前端路由和后端路由不是同一个东西，不要搞混淆-
后端路由:
url地址和后端逻辑的对应关系 -
前端路由:
url地址和组件的对应关系
-
-
1.前端中的路由 ： 不同的路径对应加载不同的页面，且页面不会跳转
-
路由的功能类似于tab切换，但是更加的高级，性能更好
-
-
2.路由的工作原理 ：
监听网页hash值变化-
(1)修改网页的hash值
-
hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转
-
-
(2)给window注册onhashchange事件，监听hash值变化
-
当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面
-
-
<body>
<!--
1.前端中的路由 ： 不同的路径对应加载不同的页面，且页面不会跳转
2.路由的工作原理 ： 监听网页hash值变化
(1)修改网页的hash值
* hash值原本的作用是来做锚点定位的，它有一个特点就是页面不会跳转
(2)给window注册onhashchange事件，监听hash值变化
* 当页面hash变化时，就会执行这个事件处理函数，然后就可以根据不同hash值加载不同页面
-->
<!-- 1.点击按钮：修改地址栏的hash值 -->
<button onclick="window.location.hash = '#/a'">按钮1</button>
<button onclick="window.location.hash = '#/b'">按钮2</button>
<button onclick="window.location.hash = '#/c'">按钮3</button>
<div id="box">
我是组件
</div>
<script>
//2.给页面注册hash值变化事件
window.onhashchange = function(){
if(window.location.hash == '#/a'){
box.innerHTML = '<p>我是组件A</p>';
}else if(window.location.hash == '#/b'){
box.innerHTML = '<p>我是组件B</p>';
}else if(window.location.hash == '#/c'){
box.innerHTML = '<p>我是组件C</p>';
}
};
</script>
</body>单页面-多页面对比
优点：
-
整体不刷新页面，用户体验更好
-
数据传递容易, 开发效率高
缺点：
-
开发成本高(需要学习路由)
-
首次加载会比较慢一点。不利于seo搜索引擎优化
总结: 单页面应用, 用户体验好, 开发效率高
vue路由使用流程
给vue添加路由有三种方式
以下两种实际开发推荐
（1）vueui 创建脚手架的勾选 vue-router选项
（2）在根目录执行: vue add router
这个命令可以让你原本没有配置路由的项目，一键配置。与vueui作用一致
(3)手动根据官方文档完整配置路由6个步骤, 使用模块化语法把路由封装到 ./router/index.js 文件中
路由完整配置六个流程
- 1.导入组件
- 2.创建routes路由规则（路径和页面一一对应）
- 3.创建路由对象
- 4.把路由对象挂载到App.vue
- 5.在页面写路由导航router-link （生成a标签）
- 6.在页面写路由出口router-view (生成占位盒子，用于显示页面内容)
路由模式
路由有两种模式
-
hash路由例如: http://localhost:8080/#/home
-
history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})路由重定向
-
重定向应用场景： 页面输入根路径/ , 自动跳转到首页 -
注意点: 重定向只是修改路径， 还需要单独去设置路由匹配规则
const routes = [
{
path: '/',
/*
(1)重定向只是修改页面路径。 输入 / 会重定向到 /find
(2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
*/
redirect: "/find"
},
{
path: '/find',
name: 'find',
component: find
},
]404重定向
-
1.
*的作用类似于通配符：表示任意路径 -
2.默认情况下，当我们输入网址的时候。 vue会从
routes数组中依次去匹配路径，如果上面的全部无法匹配就会跳转*对应的组件页面-
这一点跟nodejs那个404的原理基本类似
-
const routes = [
// ...省略了其他配置
// 404在最后(规则是从前往后逐个比较path)
{
path: "*",
component: NotFound
}
]vue路由跳转传参
第一种：
发送参数(跟之前ajaxget参数类似)
<router-link to="/path?key=value"></router-link>
接收参数： $route.query.key
第二种：
发送参数：其实跟第一种底层原理是一样，但是用js来写的。（相当于 a标签href和window.location.href一样，底层原理都是修改地址栏href. 区别是一个是a标签，一个是js代码）
this.$router.push({path: "/path", query: {key: value}})
接收参数：$route.query.key
vue动态路由匹配（声明式导航）
-
动态路由匹配（又叫声明式导航）介绍
-
作用：实现get方式传参-
看起来像是get传参，实际上是给
组件传值
-
-
-
动态路由匹配传参分为三个流程
-
1.定义路由规则
-
2.传递参数
-
3.接收参数
-
1.定义路由规则
{
path: '/friend',
name: 'friend',
component: friend
},
{
path: '/friend/:name/:age',
name: 'friend',
component: friend
},2.传递参数
-
标准写法（query传参）： /path?参数名=值
-
简洁写法（params传参）： /path/参数值1/参数值2
3.接收参数
-
如果是标准写法，这样接收参数：
$route.query.参数名 -
如果是简洁写法，这样接收参数：
$route.params.参数名
vue路由的编程式导航
声明式导航和编程式导航区别
1.声明式导航： 通过a标签href跳转传参
* 需要在路由中单独配置： /path:/参数名 * params参数在url可以看到（url传参），刷新不会消失
2.编程式导航：通过js代码来跳转传参
-
不需要在路由单独配置
-
params参数在url看不见（内存传参），刷新会消失
编程式导航介绍
-
1.作用 ： 使用js代码是做路由跳转 (替代router-link)
-
2.语法 ：
-
$router.push('路径') -
$router.push({name:'组件name'})
-
-
3.应用场景：如果希望满足条件才跳转，就可以使用编程式导航
-
router-link ：相当于a标签，只要点击就会跳转,没有逻辑
-
$router.push('路径'):相当于window.location.href,使用js来做业务逻辑
-
编程式导航传参
语法1：通过路径传参(刷新页面还在)，写在query中
// 分开写，变成 /地址?key=value
this.$router.push({ path: '路由地址', query: { key: 'value' }})
// 直接写
this.$router.push({ path: '路由地址?key=value&key2=value2'})对应路由接收this.$route.query.key 取值
语法2：通过params传参(内存传递，刷新页面就不在了)
// 通过路径跳转
this.$router.push({ path: '路由地址', query: { key: 'value' }})
// 通过名字跳转
this.$router.push({name: '路由name' , params: { key: 'value' }})对应路由接收this.$route.params.key 取值
this.$router和this.$route是否一样?
-
不是
-
this.$router,可以用来跳转 -
this.$route,可以获取参数
二级路由
为什么要有二级路由
-
点击导航栏切换页面的时候（PC端导航栏一般在顶部，移动端导航栏一般在底部），如果该页面又需要出现导航栏。这个时候就需要嵌套路由
二级路由path有/和没有/区别
如果有/,例如 /Ranking : 可以省略一级路由路径,直接通过 /Ranking访问二级路由
如果没有/,例如 Ranking : 不可以省略一级路由路径,需要通过 /find/Ranking访问二级路由
{
path: '/find', component: Find, children: [
{ path: '/', component: SongList },
{ path: '/Ranking', component: Ranking },
{ path: '/Recommend', component: Recommend },
{ path: '/SongList', component: SongList },
]
},路由导航守卫
路由导航守卫语法介绍
刚开始接触路由导航守卫你会发现和axios拦截器有点像，实际上它们是两个不同的东西。
1.相同点
(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)
(2)都是起到拦截作用
2.不同点
(1)功能不同 : axios拦截器
拦截网络请求, 导航守卫拦截路由跳转(2)应用场景不同 :
axios拦截器一般用于发送token
导航守卫用于
页面跳转权限管理(有的页面可以无条件跳转,例如商城首页可以无条件跳转。有的页面需要满足条件才能跳转，例如购物车页面就需要用户登录才可以跳转)
-
1.什么是路由导航守卫？ ： 通俗来讲，就是
路由跳转的时候需要执行的一个回调函数-
路由导航：就是路由跳转的意思
-
守卫：类似于
门卫，你做某件事之前会对你进行一个检查
-
-
2.为什么要有路由导航守卫
-
在项目开发中，并不是每一个路由跳转都是
明确的。 例如很多页面跳转需要登录判断，如果你有登录，则跳转到指定页面，没有登录则跳转到登录页面。-
举例子：我想进小区(个人信息)，门卫（导航守卫）会检查我有没有做核酸(是否登录)，如果做了就让我进去（跳转个人信息）。没做就让我去核酸点（登录页面）做完核算才可以进去。
-
-
-
3.路由导航守卫有哪些？
-
前置守卫：跳转前执行
-
后置勾子：跳转后执行
-
-
导航守卫语法介绍(
导航守卫需要创建完路由对象之后才能使用)：-
==一定要注意，在导航守卫中必须要调用
next()否则你的路由无法跳转==
-
// 实例化路由对象
const router = new VueRouter({
routes
})
// 注册导航守卫 (全局前置守卫 跳转之前执行)
router.beforeEach((to, from, next) => {
// to:去哪里 路由信息
console.log('to:', to)
// from：从哪来 路由信息
console.log('from:', from)
// console.log('next:', next)
/*
next() : 完成守卫(检查)，这个函数必须要调用
next() : 不传参，让你正常跳转（就是跳转目标路由to）
next({path:'路由路径'}) ： 进行拦截，不让你走（跳转到我指定路由）
*/
//判断是不是朋友页面，其他页面不需要守卫
if (to.path == '/my') {
//模拟登录判断
if (confirm('你登录了吗')) {
//有登录，放行
next()
} else {
//没登录，跳转登录页
next({ path: '/notfound' })
}
}
//其他页面无条件放行（一定要调用next()否则你的页面无法正常跳转）
next()
})组件缓存keep-alive
为什么要有组件缓存
-
（1）路由切换时, 消失的页面, 会被销毁, 触发destroyed
-
（2）再切换回来, 重新创建, 所有代码重新执行, 效率不
组件缓存基本使用
-
给router-view外面包裹Vue自带的keep-alive标签即可
-
默认情况下，会缓存所有组件
<keep-alive>
<router-view></router-view>
</keep-alive>缓存指定组件
在keep-alive的时候, 使用include/exclude区分即可
include 包含哪些组件名需要缓存
exclude ==不==缓存哪些名字的组件
千万注意: exclude后面字符串逗号后面不能有空格
<keep-alive include="find,friend">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="my,login">
<router-view></router-view>
</keep-alive>路由比较混淆的地方(重点)
-
1.路由完整的工作流程分为6个步骤（开发中不需要自己写，但是要说的出来）
-
2.自己配置路由每一次需要配置三个地方
- 1.导入组件
- 2.创建路由规则(routes数组: 路径和页面对应关系)
- 3.创建路由对象(router:负责管理路由)
- 4.把路由对象挂载到Vue中
- 5.写路由出口<router-view></router-view> (生成占位盒子,.用于展示路由页面的容器)
- 6.写路由导航<router-link></router-link>(生成a标签,to属性就是a标签href,用于跳转路由)
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
