vue高级-router

分手后的思念是犯贱 2021-07-25 16:57 318阅读 0赞

SPA （ single page App ） 单页面应用  
多页面应用  
有多个html文件，通过a标签的连接联通各个页面  
缺点  
开发起来太冗余，编译、压缩很耗时间  
页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏  
单页面应用  
不需要刷新页面，因为它就是一个页面  
这个页面内容在切换  
单页面内容之间的切换要想实现我们就是用路由了  
如今我们的app、后台管理系统 主要的开发形式就是spa  
vue路由功能  
实现单页面的切换  
路由携带参数  
路由的导航守卫  
路由进行数据预载（进入组件前就请求获得数据）  
vue-router 基础  
vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？ 【 黄金 】  
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 \#/home  
history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home  
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】  
hash/history 常用于浏览器端，abstract用于服务端  
路由的使用步骤  
安装 vue-router yarn add vue-router  
在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块  
引入第三方的依赖包, 并注册路由  
import Vue from ‘vue’  
import VueRouter from ‘vue-router’  
  
Vue.use( VueRouter ) //使用vue-router这个第三方插件  
注意： import这个关键字要放在整个文件的上层  
创建了一个router对象实例，并且创建路由表  
const routes = \[  
\{  
path: ‘/home’,  
component: Home  
\}//每一个对象就是一个路由  
\]  
const router = new VueRouter(\{  
routes//路由表 必写的  
\})  
导出router实例  
export default router  
入口文件main.js中引入路由实例 router , 然后在根实例中注册  
import router from ‘./router/index.js’  
new Vue(\{  
router,  
render: (h) => App  
\}).$mount(’\#app’)  
给路由一个路由展示区域  
如果是以及路由， 那么我们放在App组件中,用一个 router-view 的组件表示  
  
当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上  
const routes = \[  
\{ //我们要求这个路由的配置要放在路由表的最上方  
path: ‘/’,  
redirect: ‘/home’  
\}  
\]  
业务： 错误路由匹配，  
const routes = \[  
\{  
path: ‘/’,  
redirect: ‘/home’ //重定向  
\},  
\{  
path: ‘/home’,  
component: Home  
\},  
\{  
path: ‘/list’,  
component: List  
\},  
\{  
path: ‘/detail’,  
component: Detail  
\},  
\{  
path: ‘/login’,  
component: Login  
\},  
\{  
path: ‘/register’,  
component: Register  
\},  
\{  
path: ‘/user’,  
component: User  
\},  
\{  
path: ‘/shopcar’,  
component: Shopcar  
\},  
\{  
path: ‘/error’,  
component: Error  
\},  
\{ //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个  
path: ‘\*\*’,  
redirect: ‘/error’  
\}  
\]  
vue路由模式的确定 mode  
如果你使用的是 hash , 那么a标签就可以了、  
如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件  
router-link 这个组件 身上必须要有一个 to 属性  
router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存  
二级路由  
const routes = \[  
\{  
path: ‘/shopcar’,  
component: Shopcar,  
children: \[  
\{  
path: ‘yyb’, //不写 /  
component: Yyb  
\}  
\]  
\}  
\]  
注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域  
命名路由  
作用： 就是简写路径了  
\{  
path: ‘/shopcar’,  
component: Shopcar,  
//子路由  
children: \[  
\{  
path: ‘yyb’, // 容易犯错点 /yyb X  
component: Yyb,  
name: ‘yyb’ //命名路由  
\},  
\{  
path: ‘junge’,  
component: Junge  
\}  
\]

\},  
使用： 单项数据绑定to属性  
  
vue-router 进阶 【 分类 -》 列表 -》 详情 】  
动态路由 & 路由传参 & 路由接参  
动态路由：  
url中路由是改变的，但是改变路由公用一个组件  
举例：  
localhost:3000/detail/001?a=1&b=2  
localhost:3000/detail/002?a=2&b=3  
detail  
vue cli3 配置反向代理 20分钟  
在根目录下面新建一个 vue.config.js  
// vue.config.js中可以默认直接使用 http-proxy-middleware  
module.exports = \{  
devServer: \{  
proxy: \{  
‘/douban’: \{ // /douban 是一个标记  
target: ‘http://api.douban.com’, // 目标源  
changeOrigin: true, // 修改源  
pathRewrite: \{  
‘^/douban’: ‘’  
\}  
\},  
‘/siku’: \{  
target: ‘https://android.secoo.com’,  
changeOrigin: true,  
pathRewrite: \{  
‘^/siku’: ‘’  
\}  
\}  
\}  
\}  
\}  
路由的传参 10分钟  
  
路由的接参  
我们发现凡是使用了路由的组件，我们统称为： 路由组件  
路由组件身上会自动添加一个  r o u t e 的 数 据 i d : t h i s . route的数据 id: this. route的数据id:this.route.params.id  
query: this. r o u t e . q u e r y . x x x 编 程 式 导 航 5 分 钟 p u s h t h i s . route.query.xxx 编程式导航 5分钟 push this. route.query.xxx编程式导航5分钟pushthis.router.push(’/home’)  
this. r o u t e r . p u s h ( n a m e , p a r a m s , q u e r y ) p u s h 可 以 将 我 们 的 操 作 存 放 到 浏 览 器 的 历 史 记 录 r e p l a c e t h i s . router.push(\{name,params,query\}) push可以将我们的操作存放到浏览器的历史记录 replace this. router.push(name,params,query)push可以将我们的操作存放到浏览器的历史记录replacethis.router.replace(’/home’)  
this.$router.replace(\{name,params,query\})  
replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级  
push/replace的参数就是to属性的参数  
业务：  
按钮的返回  
push  
replace  
back  
go  
思考： 有一个业务，当我们点击 /mine的时候，要自动跳转到 /mine/login,这个时候我们发现手段不够用了，生命周期钩子函数也实现不了，这个我们想，如果我们能监听到路由的变化，那该有多好？  
解决; vue为了能够监听路由的变化情况，给了一个解决方法： 这个就是导航守卫  
四、导航守卫  
又称：路由守卫、路由钩子、路由拦截

1、全局导航守卫  
管理或监听整个项目  
1  
全局前置守卫  
router.beforeEach(fn(to,from,next)\{ \})  
1  
全局解析守卫  
router.beforeResolve(fn(to,from,next)\{ \})  
1  
全局后置守卫  
做用户友好提示  
router.afterEach(fn(to,from)\{ \})  
1  
2、路由独享守卫  
写在路由表中，是路由配置选项之一  
无法监听与当前路由无关的路由

beforeEnter: (to, from, next) => \{ \}  
1  
3、组件内守卫  
组件内前置守卫  
因为组件此时没有创建，所以this访问不到，需要通过next(vm=>\{ \})访问  
beforeRouteEnter(to,from,next)\{ \}  
1  
组件内更新守卫  
可以访问组件实例this  
beforeRouteUpdata(to,from,next)\{ \}  
1  
组件内后置守卫  
this可以访问到  
beforeRouteLeave(to,from,next)\{\}  
1

关于next的使用

next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由  
next( false ) 表示不通过， 表示从当前路由跳转不到目标路由  
next(’/login’) 等价于 next(\{path:’/login’\}) 跳转指定的路由  
next(’/login’) 等价于 next(\{path:’/login’,params,query\})  
next( fn ) 数据预载 next(vm=>\{ \})

五、动态效果实现  
animate.css

六、路由懒加载  
1、vue异步组件

/\* vue异步组件技术 \*/  
\{  
path: ‘/home’,  
name: ‘home’,  
component: resolve => require(\[’@/components/home’\],resolve)  
\}  
1  
2  
3  
4  
5  
6  
2、es提案的import()

// 没有指定webpackChunkName，每个组件打包成一个js文件。  
/\* const Home = () => import(’@/components/home’)  
const Index = () => import(’@/components/index’) */  
// 指定了相同的webpackChunkName，把组件按组分块,会合并打包成一个js文件。  
const Home = () => import(/* webpackChunkName: ‘ImportFuncDemo’ */ ‘@/components/home’)  
const Index = () => import(/* webpackChunkName: ‘ImportFuncDemo’ \*/ ‘@/components/index’)  
1  
2  
3  
4  
5  
6  
3、webpack提供的require.ensure()

//按需加载  
\{  
path: ‘/home’,  
component: r => require.ensure(\[\], () => r(require(’@/components/home’)), ‘demo’)，  
name: ‘home’,  
\}  
1  
2  
3  
4  
5  
6

七、动态缓存