企业网站建设思路学生个人网页制作代码
day-058-fifty-eight-20230426-vue-router路由
vue-router路由
路由：切换页面，单页面应用上使用的
hash模式—锚点
对应vue版本
- 如何使用路由版本
- vue2 —> router3
- vue3 —> router4
使用vue-router
-
创建项目的时候，直接选中路由
-
src目录下面多了一个router文件夹，index.js上写好了基础模板
-
在main.js中导入，挂载
import router from './router' new Vue({router,render: h => h(App) }).$mount('#app')
-
-
创建项目的时候，没有选中路由
-
安装vue-router
npm install vue-router@3//vue2对应的vue-router版本3 //npm install vue-router@4//vue3对应的vue-router版本4 -
接下来自己在src目录下创建router文件夹， index.js 写基础模板
-
在main.js中导入，挂载
-
路由配置属性
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({//路由属性routes:[],// routes:routes//mode:"history"//mode:"hash" 默认是hash
})
export default router
路由配置规则
import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
Vue.use(VueRouter);
// 路由配置规则
const routes = [{path: "/", //路由路径name: "home", //命名路由//展示的组件页面--静态组件（缓存）component: HomeView, //展示的组件页面},{path: "/about",name: "about",//展示的组件页面--路由懒加载component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),//注释的含义，在打包时定义的webpack区块chunk的名称。同一个名称的，在打包时会打包到一起，共用一块},{path: "/InfoView",name: "InfoView",component: () => import(/* webpackChunkName: "InfoView" */ "../views/InfoView.vue"),},
];
const router = new VueRouter({// 路由配置属性routes,// mode: "history",//历史模式// mode:'hash',//默认是hash
});
// vue路由实例对象
console.log(`router-->`, router);
export default router;
路由页面展示
<template><div id="app"><nav><router-link to="/">路径一/</router-link> |<router-link to="/about?name=lili&age=18">路径二/about</router-link> |<router-link :to="{ name: 'InfoView' }">路径三直接到InfoView对应的路径</router-link></nav><router-view /></div>
</template>
- router-link标签相当于a标签
- to属性相当于src , to属性的值就是路由规则的path值。
- tag属性 可以将router-link标签在编译时不默认转为a标签，而转成对应的标签。
- 如tag="span"转成span标签。
<router-link to="/about" tag="span">About</router-link>
- 如tag="span"转成span标签。
- 命名路由，可以通过命名路由名称跳转页面。
<router-link :to="{ name: 'InfoView' }">路径三直接到InfoView对应的路径</router-link>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygTc1Q8p-1682524495861)(./router-link标签与vue路径实例对象与router-view标签的联系.png)]
vue路由传参
- 在路由规则中定义参数（动态路由）
- 为什么要传参？
- 因为如果一个vue页面不通过传参，那么页面的初始化可控数据就是固定的，也就是说，用户只能看到一个页面。
- 而如果有其它的可控初始化数据，那么vue组件就可以在生命周期中通过接口向后台中请求对应的数据，进而让页面显示出不同的内容。
- 因为如果一个vue页面不通过传参，那么页面的初始化可控数据就是固定的，也就是说，用户只能看到一个页面。
- 为什么要传参？
vue路由传参的类型
- query
-
问号传参
-
命名路由传参
-
都是显式传参(刷新页面数据不消失)
<template><router-link to="/about?name=lili&age=18">About</router-link> </template>-
组件页面接收参数
<template><h3>{{ $route.query.name }}</h3> </template>- 不用修改路由配置信息
-
-
- params
-
隐式传参(刷新页面数据消失)
- 通过命名路由方式传参
- 不需要修改路由配置信息
- 通过命名路由方式传参
-
显式传参 必须修改路由配置信息
-
必须修改路由配置信息
import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); // 路由配置规则 const routes = [{path: "/ParamsShowView",name: "ParamsShowView",component: () => import("../views/ParamsShowView.vue"),}, ];const router = new VueRouter({routes, }); export default router;import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); // 路由配置规则 const routes = [{path: "/ParamsShowView/:name/:age",//由"/ParamsShowView"改为"/ParamsShowView/:name/:age"name: "ParamsShowView",component: () => import("../views/ParamsShowView.vue"),}, ];const router = new VueRouter({routes, }); export default router; -
显式传参(刷新页面数据不消失)
<template><router-link to="/ParamsShowView/fang/25">ParamsShowView</router-link> </template>-
组件页面接收参数
<template><div>{{ $route.params }}</div> </template>
-
-
-
props
-
简化 params 传参的时候，接收参数
<router-link to="/info/lisa/28">Info</router-link>{path: '/info/:name/:age',name: 'Info',component: Info,props:true }-
组件接收
<template><div>{{ name }}---{{ age }}</div> </template> <script> export default {props:["name","age"] } </script>
-
-
直接
{path: '/my',name: 'My',//路由懒加载component: () => import(/*webpackChunkName: "about"*/ '../views/My.vue'),props:{ sidebar: false } }<template><div>MY---{{ sidebar }}</div> </template> <script> export default {props:["sidebar"] } </script>
-
-
路由重定向
{//路由重定向--访问 / 页面,都 /homepath:"/",redirect:"/home"},{//路由重定向--访问任何没有的页面,都page404path:"*",redirect:'/page404'},
路由高亮显示
路由别名
{path: '/home',//路由路径name: 'Home',//命名路由component: Home,//展示的组件页面alias:"/h"
},
路由模式
- hash 哈希模式
- history 历史模式
- abstract 后端路由—修改网址路径没用，vue中并没有用
const router = new VueRouter({//路由属性routes,// routes:routes// mode: "history",//历史模式mode:'hash',//默认是hash// mode:'abstract'//后端路由---修改网址路径没用，vue中并没有用
})
hash哈希模式与history历史模式的区别
- 哈希模式（哈希路由） 是监控浏览器哈希值的变化
- 历史模式（浏览器browser路由） 是监控浏览器路径的变化,—服务器必须配合，否则404
- 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法来监控
history历史模式的缺陷
- 通过history api，我们丢掉了丑陋的#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,
- 因为刷新是实实在在地去请求服务器的。
- 在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。
- 但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。
二级路由
在router-view标签中显示变换出来的vue页面组件中又使用了router-view标签。
{path: '/info',name: 'Info',//路由懒加载component: () => import(/* webpackChunkName: "about" */ '../views/Info.vue'),props:true,//redirect:"/info/infoa",//二级路由重定向--1//二级路由children:[//path:"/infoa"----to="/infoa"//path:"/info/infoa"----to="/info/infoa"//path:"infoa"----to="/info/infoa"{//二级路由重定向--2path:"/info",redirect:"infoa"},{path:"infoa",name:"Infoa",component: () => import(/* webpackChunkName: "about" */ '../views/Info/InfoA.vue'),},{path:"infob",name:"Infob",component: () => import(/* webpackChunkName: "about" */ '../views/Info/InfoB.vue'),}]
},
- 页面结构
-
根目录，无路由层级，必定显示。
<template><div id="app"><router-link to="InfoView">InfoView</router-link><router-view /></div> </template> -
一级路由层级页面，#号后面必须要对应。
<template><div><h1>InfoView</h1><router-link to="/InfoView/InfoViewA">/InfoView/InfoViewA</router-link> | <router-link to="/InfoView/InfoViewB">/InfoView/InfoViewB</router-link><router-view></router-view></div> </template> -
二级路由层级页面，依附于一级路由，展示在一级路由中的router-view标签区域内。
<template><div>InfoViewA</div> </template><template><div>InfoViewB</div> </template>
-
路由高亮
- 实际上就是css样式设置，路由切换时，router-link标签由vue渲染成的DOM中会添加上动态的类名。
-
高亮的非精准匹配
/info/infna----/info与/info/infna.router-link-active{background-color: red; } -
高亮的精准匹配
/info/infna----/info/infna(只匹配当前路径触发的元素).router-link-exact-active {background-color: yellow; }
-
高亮换名称
const router = new VueRouter({//路由属性routes,// routes:routeslinkActiveClass: 'myactive',linkExactActiveClass: "exact-router"
})
$route路由信息对象
- $route 路由信息对象
- $route.path
- 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。
- $route.params
- 一个 key/value 对象，包含了 动态片段 和 全匹配片段，
- 如果没有路由参数，就是一个空对象。
- $route.query
- 一个 key/value 对象，表示 URL 查询参数。
- 例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
- 如果没有查询参数，则是个空对象。
- $route.hash
- 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
- $route.fullPath
- 完成解析后的 URL，包含查询参数和 hash 的完整路径。
- $route.matched
- 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
- $route.name 当前路径名字
- $route.meta 路由元信息
- $route.path
$router路由实例对象
- $router表示路由的实例对象，是路由配置生成的路由实例对象，一开始导出后，就被挂载到vue对象上了。
动态修改路由表的方法
-
addRoute/addRoutes(淘汰) 添加路由
-
getRoutes：获取路由表中的所有路由 数组
-
removeRoute：删除路由
router.removeRoute("My") //My是路由名称 -
hasRoute:判断是否具有某个路由
动态添加一个路由
动态生成路由表一般由$router.addRoute()调用。
-
addRoute/addRoutes(淘汰) 添加路由
-
addRoutes() 2023年已经被废弃了。
router.addRoute({path:"/onepage",name:"OnePage",component: () => import(/* webpackChunkName: "about" */ '../views/OnePage.vue') })
-
-
getRoutes：获取路由表中的所有路由* 数组
路由页面跳转的方法
- push(XXX) 去某个页面,有历史记录
- replace(XXX) 去某个页面,没有历史记录
- back() 返回上一个页面
- forward() 下一个页面
- go(0) 刷新
- go(1) 下一个页面 go(5) 下五个页面
- go(-1) 上一个页面 go(-7) 上一个页面
//this.$router.replace("/about");
this.$router.push({name:"About",query:{name:"fang",age:29}
});
导航守卫
- 全局守卫
- 路由配置中的路由独享守卫
- 组件内的守卫
导航解析流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edNCFpVz-1682524495862)(./路由钩子解析流程.png)]
- 导航被触发。
- 在失活的组件里调用 beforeRouteLeave 守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
进阶参考
- vue2对应的Vue Router3官网
- vue 基于abstract 路由模式 实现页面内嵌