本篇以vue3+vue-router 4.x为例
一、入门
- src下新建router文件夹，router下新建index.ts:
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 路由类型:RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: () => import("../views/vueUse.vue/index.vue"),
},
{
path: "/Bem",
component: () => import("../views/home/event/slot"),
children:[
]
},
{
path: "/home",
component: () => import("../views/home/index.vue"),
},
];
const router = createRouter({
// 路由模式
history: createWebHistory(),
routes,
});
export default router;-
router-link
我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
-
router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。
<template>
<div>
<div>
<!--使用 router-link 组件进行导航 -->
<!--通过传递 `to` 来指定链接 -->
<!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
<router-link tag="div" to="/">跳转a</router-link>
<router-link tag="div" style="margin-left:200px" to="/register">跳转b</router-link>
</div>
<hr />
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
-
main.ts：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')二、导航方式（声明式、编程式）
组件中使用router或者route
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
- 声明式导航
<router-link to="/">xxx</router-link>点击 <router-link :to="..."> 相当于调用 router.push(...)
-
编程式导航
//router.push方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
//params与path不能一起使用
//当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如 undefined、false 等）都将被自动字符串化
router.push({ path: '/user', params: { username } }) // -> /user
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })- 替换当前位置
<router-link to="/" replace>xxx</router-link>
//或者
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })- 横跨历史
router.push该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版
-
a标签跳转
直接通过a href也可以跳转但是会刷新页面
<a href="/home">home</a>三、命名路由，命名视图，嵌套路由
1.命名路由
除了 path 之外，你还可以为任何路由提供 name。这有以下优点：
- 没有硬编码的 URL
params的自动编码/解码。- 防止你在 url 中出现打字错误。
- 绕过路径排序（如显示一个）
const routes = [
{
path: '/user/:username',
name: 'user',
component: User,
},
]<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link> 这跟代码调用 router.push() 是一回事：
router.push({ name: 'user', params: { username: 'erina' } })在这两种情况下，路由将导航到路径 /user/erina。
2.命名视图
命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 路由类型:RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: () => import("../views/vueUse.vue/index.vue"),
redirect:'/b',
//嵌套路由
children:[
{
path:'/c',
components:{
default:()=>import('../views/vueUse.vue/a.vue'),
header:()=>import('../views/vueUse.vue/c.vue')
}
}
]
},
];
const router = createRouter({
// 路由模式
history: createWebHistory(),
routes,
});
export default router;对应的路由出口：
<template>
<div class="container" ref="el">
<router-link to="/a" style="margin-right:10px" replace>a</router-link>
<router-link to="/b" :replace="true" style="margin-right:10px">b</router-link>
<router-link to="/c" :replace="true">c</router-link>
<router-view></router-view>
<router-view name="header"></router-view>
</div>
</template>四、路由传参
1.query传参
传：
import {useRouter} from 'vue-router'
const router = useRouter()
const toVue = (val:string) => {
router.push({
path:'/a',
query:{
id:val
}
})
}接收：
import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.query.id);2.params传参
传：
const toOthers = () =>{
router.push({
name:'a',
params:{
w:'ayy'
}
})
}接收：
import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.params);实际使用后发现会报警告，而且接收的时候获取不到传过来的值，查询后发现：
说明： router/packages/router/CHANGELOG.md at main ·vuejs/router ·GitHub
3.动态路由传参
路由配置：
//动态路由参数
{
path:'/c/:user',
name:'c',
components:{
default:()=>import('../views/vueUse.vue/a.vue'),
header:()=>import('../views/vueUse.vue/c.vue')
}
}传：
const toOthers = () =>{
router.push({
name:'c',
params:{
user:'ayy'
}
})
}接收：
import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.params.user);//ayy区别：
-
query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
-
query 传递的参数会显示在地址栏中
-
params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
五、不同历史记录模式
1，Hash模式
hash 模式是用 createWebHashHistory() 创建的：
它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
}) 
2.HTML5模式
用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式：地址栏不带 # 号
由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误
要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面
服务器配置示例：不同的历史模式 | Vue Router (vuejs.org)
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
//...
],
})六、重定向和别名
1.重定向
一般写法：
const routes = [{ path: '/home', redirect: '/' }]命名的路由：
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]动态返回重定向目标：
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]注意：
导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在上面的例子中，在 /home 路由中添加 beforeEnter 守卫不会有任何效果
在写 redirect 的时候，可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。唯一的例外是嵌套路由：如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。
2.别名
{
path: "/home",
component: () => import("../views/vueUse.vue/index.vue"),
redirect:'/b',
children:[
{
path:'/a',
name:'a',
//访问http://localhost:8001/和http://localhost:8001/a都访问的是a组件
alias:'/',
//数组形式,地址栏映射为http://localhost:8001/home/a11;http://localhost:8001/a22
alias:['a11','/a22'],
component:()=>import('../views/vueUse.vue/a.vue')
},
{
path:'/b',
name:'b',
component:()=>import('../views/vueUse.vue/b.vue')
},
]
},八、导航守卫
1.全局前置守卫router.beforeEach
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})每个守卫方法接收两个参数：
to: 即将要进入的目标from: 当前导航正要离开的路由- next：你可以向任何导航守卫传递第三个参数。在这种情况下，确保
next在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错
可以返回的值如下：
false: 取消当前的导航。如果浏览器的 URL 改变了，那么 URL 地址会重置到from路由对应的地址。- 一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，你可以设置诸如
replace: true或name: 'home'之类的配置。当前的导航被中断，然后进行一个新的导航，就和from一样。
示例：
router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})2.全局解析守卫（router.beforeResolve）
解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用
router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 处理错误，然后取消导航
return false
} else {
// 意料之外的错误，取消导航并把错误传给全局处理器
throw error
}
}
}
})3.全局后置钩子router.afterEach
不会接受 next 函数也不会改变导航本身
对于分析、更改页面标题、声明页面等辅助功能
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})3.路由独享守卫 beforeEnter
beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// reject the navigation
return false
},
},
]4.组件内守卫
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
export default {
setup() {
// 与 beforeRouteLeave 相同，无法访问 `this`
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// 取消导航并停留在同一页面上
if (!answer) return false
})
const userData = ref()
// 与 beforeRouteUpdate 相同，无法访问 `this`
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
},
}5.完整的导航解析流程
九、路由元信息
过渡名称、谁可以访问路由等。可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问
{
path:'/a',
name:'a',
meta:{requried:'heihei',transition:'animate__backInDown'},
component:()=>import('../views/vueUse.vue/a.vue')
},页面中使用：
import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.meta);TypeScript:
如果不使用扩展 将会是unknow 类型
// typings.d.ts or router.ts
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
// 是可选的
isAdmin?: boolean
// 每个路由都必须声明
requiresAuth: boolean
}
}十、滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
const router = createRouter({
// 路由模式
history: createWebHistory(),
routes,
scrollBehavior:(to,from,savePosition)=>{
console.log(to,from,savePosition);
// 延迟滚动，以及“丝滑滚动”
// return new Promise((resolve,reject)=>{
// setTimeout(()=>{
// resolve({
// left:0,top:200,
// behavior: 'smooth',
// })
// },1500)
// })
// savedPosition，只有当这是一个 popstate 导航时才可用（由浏览器的后退/前进按钮触发）
// if(savePosition){
// return savePosition
// }else{
// return {left:0,top:0}
// }
// 模拟滚动到锚点
if(to.hash){
return{
el:to.hash
}
}
//通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，top 和 left 将被视为该元素的相对偏移量。
// return {
// // 也可以这么写
// // el: document.getElementById('main'),
// el: '#main',
// top: -10,
// }
}
});十一、过渡动效
<template>
<router-view v-slot="{ Component }" name="header">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>单个路由过渡：
<template>
<router-view #default="{ route, Component }">
<transition :enter-active-class="`animate__animated ${route.meta.transition}`">
<component :is="Component"></component>
</transition>
</router-view>
</template>
//router.js
{
path:'/a',
name:'a',
meta:{requried:'heihei',transition:'animate__backInDown'},
component:()=>import('../views/vueUse.vue/a.vue')
},强制在复用的视图之间进行过渡：
Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以添加一个 key 属性来强制过渡
<router-view v-slot="{ Component, route }">
<transition name="fade">
<component :is="Component" :key="route.path" />
</transition>
</router-view>十二、路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效
动态导入代替静态导入：
// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')
const router = createRouter({
// ...
routes: [{ path: '/users/:id', component: UserDetails }],
})或者返回一个Promise
const UserDetails = () =>
Promise.resolve({
/* 组件定义 */
})组件按组分块：
- webpack
特殊的注释语法来提供 chunk name
const UserDetails = () =>
import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')- 使用vite
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
// https://rollupjs.org/guide/en/#outputmanualchunks
output: {
manualChunks: {
'group-user': [
'./src/UserDetails',
'./src/UserDashboard',
'./src/UserProfileEdit',
],
},
},
},
},
})新知识：window.requestAnimationFrame
全面理解 requestAnimationFrame - 掘金 (juejin.cn)
示例：
<body>
<button class="div" onclick="tab()" style="margin-bottom:10px">点击</button>
<div style="width: 0px;height:12px;line-height: 12px;background: pink;">
</div>
<script>
function tab(){
var div = document.querySelector('div')
var timer=window.requestAnimationFrame(function fn(){
let width = div.style.width.substr(0,div.style.width.length - 2)
console.log(width);
if( width <100){
div.style.width = width+3+'px';
timer = window.requestAnimationFrame(fn)
}else{
window.cancelAnimationFrame(timer)
}
})
}
</script>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
