|
目录
Vue路由
路由及工作原理
单页面应用SPA介绍???????
vue路由使用流程
路由模式
路由hash模式和history模式的区别
路由重定向
404重定向
vue路由跳转传参
vue动态路由匹配（声明式导航）
vue路由的编程式导航
编程式导航传参
二级路由(嵌套路由)
路由导航守卫
使用导航守卫完成登录页面跳转
组件缓存keep-live
组件缓存基本使用
缓存指定组件
组件缓存勾子
路由比较混淆的地方
目录
vue路由
路由及工作原理
单页面应用SPA介绍
vue路由使用流程
路由模式
路由重定向
404重定向
vue路由跳转传参
vue动态路由匹配（声明式导航）
vue路由的编程式导航
编程式导航传参
二级路由(嵌套路由)
路由导航守卫
使用导航守卫完成登录页面跳转
组件缓存keep-live
组件缓存基本使用
缓存指定组件
组件缓存勾子
路由比较混淆的地方
Vue路由
路由及工作原理
<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>
单页面应用SPA介绍
-
singal page application 目标: 了解什么是单页面应用, 以及前端路由作用
单页面应用: 所有功能在一个页面上实现
前端路由: 实现业务场景切换
经典单页面应用案例：网易云音乐
单页面-多页面对比
| 对比部分 | 单页应用 | 多页面应用 |
|---|
| 组成 | 一个html文件多个组件组成 | 多个html文件 | | 静态资源共用 | 共用，一次性加载完毕 | 不共用，每个页面都加载一遍 | | 刷新方式 | 页面局部刷新 | 整页加载 | | url模式 | itcast.com/#/pageone | itcast.com/pageone.html | | 用户体验 | 用户体验良好 | 页面切换加载缓慢体验较差 | | 数据传递 | 容易 | 依赖url传参，cookie,localStorage | | 搜索引擎优化 | 不利于seo优化，需要ssr优化(服务端渲染) | 支持良好 | | 使用场景 | 追求高体验 不要求seo | 高度要求seo | | 开发成本 | 较高 需要依赖专业的框架, 开发效率高 | 较低 重复代码多, 开发效率低 |
优点：
-
整体不刷新页面，用户体验更好 -
数据传递容易, 开发效率高
缺点：
-
开发成本高(需要学习路由) -
首次加载会比较慢一点。不利于seo搜索引擎优化
总结: 单页面应用, 用户体验好, 开发效率高
vue路由使用流程
给vue添加路由有三种方式
以下两种实际开发推荐（自动配置一条龙服务）
（1）vueui 创建脚手架的勾选 vue-router选项
（2）在根目录执行: vue add router
vue本身不提供路由功能，而是由vue团队提供的Vue Router插件完成，因此Vue Router也称之为vue全家桶中的一员
最简单的一键生成路由的方式：使用vue ui创建项目的时候，只需要勾选Router选项即可???????
url和组件的对应关系
-
不同于功能类的组件,路由管理的组件一般放在/views目录 1.1 /views目录：放组件的地方，这里的组件一般对应页面级别(整个页面) 1.2 /components目：也是放组件的地方，这里的组件一般对应需要复用的页面局部内容 -
路由管理的组件都是页面级别
-
一般路由管理跳转的组件都是页面级别，放入views文件夹中
-
属性:
-
path:地址
-
component:组件
-
name:类似于组件的name属性,可以省略
导入
手动加个页面
-
views目录下添加一个组件,比如list.vue
-
在/router/index.js中导入组件并配置规则 -
在App.vue中顶部添加一个router-link并设置to属性即可 -
切换到浏览器,点击切换看看
路由模式
路由有两种模式
路由hash模式和history模式的区别
默认 hash模式：原理是hash值监听，改变页面hash值
history模式：原理是改变路径
区别：
(1)路径不同：hash模式有#号history模式没有#号
(2)history模式会给服务器发请求，需要服务器单独配置
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重定向
const routes = [
// ...省略了其他配置
// 404在最后(规则是从前往后逐个比较path)
{
path: "*",
component: NotFound
}
]
routes是什么???数组：路由隐射规则（url与组件的对应关系）
router是什么?????????router
vue路由跳转传参
共四种方式，常用的只有两种。重点掌握其中两种即可
🏆第一种：
发送参数(跟之前ajax get参数类似)
<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
| 跳转方法 | 传参位置 | 路由规则 | 接收 |
|---|
| <router-link to="/path?key=value"></router-link> | /path?key=value | 无特殊 | $route.query.key | | <router-link to="/path/值"></router-link> | /path/值 | /path/:key | $route.params.key | | this.$router.push({path: "/path", query: {key: value}}) | query的对象 | 无特殊 | $route.query.key | | this.$router.push({name: "com", params: {key: value}) | params的对象 | 路由规则需要name属性 | $route.params.key(注意,这种在内存中保存) |
vue动态路由匹配（声明式导航）
🏆声明式导航两种语法
💎1.查询参数：
'/路径？参数名=参数值’
获取：$route.query
💎2.路径参数
路由规则中:{path:"路径/:参数名/:参数名",componnet:组件名}
传参：to="/路径/参数值/参数值"
获取:$route.params
1.定义路由规则
两个都要写哟，否则只能params传参，无法query传参
{
path: '/friend',
name: 'friend',
component: friend
},
{
path: '/friend/:name/:age',
name: 'friend',
component: friend
},
2.传递参数
3.接收参数
如果是标准写法，这样接收参数： $route.query.参数名
如果是简洁写法，这样接收参数： :$route.params.参数名
<template>
<div>
<ul>
<li>这是当前页面 query 接收到的参数:
<span>姓名：{{ $route.query.name }}</span> --
<span>年龄：{{ $route.query.age }}</span>
</li>
<li>这是当前页面 params 接收到的参数:
<span>姓名：{{ $route.params.name }}</span> --
<span>年龄：{{ $route.params.age }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'friend',
};
</script>
<style scoped>
</style>
vue路由的编程式导航
🏆声明式导航和编程式导航区别
💎1.声明式导航： 通过a标签href跳转传参
* 需要在路由中单独配置： /path:/参数名
* params参数在url可以看到（url传参），刷新不会消失
💎2.编程式导航：通过js代码来跳转传参
编程式导航介绍
编程式导航传参
动态路由匹配介绍
1.作用 ： 跳转路由时给组件传参
类似于以前跳转页面window.location.href传参
2.语法
💎语法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 取值
3.应用场景：相当于跳转 页面(组件的html) 传参
this.$router和this.$route是否一样?
-
不是 -
this.$router,可以用来跳转,是一个对象
-
this.$route,可以获取参数,
二级路由(嵌套路由)
为什么要有二级路由
二级路由path有/和没有/区别
如果有/,例如 /Ranking : 可以省略一级路由路径,直接通过 /Ranking访问二级路由
如果没有/,例如 Ranking : 不可以省略一级路由路径,需要通过 /find/Ranking访问二级路由
路由导航守卫
刚开始接触路由导航守卫你会发现和axios拦截器有点像，实际上它们是两个不同的东西。
💎1.相同点
(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)
(2)都是起到拦截作用
💎2.不同点
(1)功能不同 : axios拦截器拦截网络请求, 导航守卫拦截路由跳转
(2)应用场景不同 :
axios拦截器一般用于发送token
导航守卫用于页面跳转权限管理
(有的页面可以无条件跳转,例如商城首页可以无条件跳转。
有的页面需要满足条件才能跳转，例如购物车页面就需要用户登录才可以跳转)
导航守卫语法介绍(导航守卫需要创建完路由对象之后才能使用)：
// 实例化路由对象
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:'路由路径'}) ： 进行拦截，不让你走（跳转到我指定路由）
*/
next()
})
使用导航守卫完成登录页面跳转
项目开发中，并不是每一个页面都需要做登录页面跳转的。以网易云为例
1.首页： 不需要登录判断，任何用户都能访问
2.我的朋友：需要做登录判断。
实现登录页面路由导航守卫
// 注册导航守卫 (全局前置守卫 跳转之前执行)
router.beforeEach((to, from, next) => {
console.log(from,to)
//判断是不是朋友页面，其他页面不需要守卫
if( to.name == 'friend'){
//模拟登录判断
if( confirm('你登录了吗') ){
//有登录，放行
next()
}else{
//没登录，跳转登录页
next({path:'/login'})
}
}
//其他页面无条件放行（一定要调用next()否则你的页面无法正常跳转）
next()
})
组件缓存keep-live
1.为什么要有组件缓存
-
（1）路由切换时, 消失的页面, 会被销毁, 触发destroyed -
（2）再切换回来, 重新创建, 所有代码重新执行, 效率不
组件缓存基本使用
给router-view外面包裹Vue自带的keep-alive标签即可
缓存指定组件
在keep-alive的时候, 使用include/exclude区分即可
-?include 包含哪些组件名需要缓存
<keep-alive include="find,friend">
<router-view></router-view>
</keep-alive>
-exclude ==不缓存哪些名字的组件
千万注意: exclude后面字符串逗号后面不能有空格
<keep-alive exclude="my,login">
<router-view></router-view>
</keep-alive>
组件缓存勾子
组件不执行销毁/初始化创建的方法了, 如何知道组件被失去激活/激活呢?
路由比较混淆的地方
|