Vue-Route4 ts

小满学习视频
Vue-Route 官网

项目的目录结构：

1. Vue-Router的使用

安装Vue-route

pnpm add vue-router@4

创建router文件

• /route/index.vue

import { createRouter } from "vue-router";
import {createMemoryHistory,createWebHashHistory,createWebHistory,
} from "vue-router";import type { RouteRecordRaw } from "vue-router";
// 2. 定义路由
const routes: RouteRecordRaw[] = [{path: "/",  // 浏览器中的路径name: "login", // 路由名称（非必需）component: () => import("@/views/login.vue"), // 路由组件},{path: "/home",name: "home",component: () => import("@/views/home.vue"),},{path: "/about",component: () => import("@/views/about.vue"),},
];
// 1. 创建路由器实例
const router = createRouter({// 缺点：浏览器没有前进后退按钮history: createMemoryHistory(),// 缺点：地址中有#号不美观；优点：兼容性是最好的，不需要服务器做任何配置// history: createWebHashHistory(),// 缺点：需要服务器做适配；优点：支持浏览器的前进/后退；// history: createWebHistory(),routes,
});export default router;

• 关于历史记录模式
  • 历史记录模式共有三种，各有优缺点
  • 官网推荐使用createWebHistory，后端服务器的配置也不麻烦
  • 不注重美观的后台管理网站中推荐使用createWebHashHistory
• router和route两个的关系
  • router：路由器，是路由的管理者，管理着所有的路由
  • route：路由，一条一条的线路，浏览器url对应着vue

在main.ts中全局引用该插件

// 引入插件vue-router
import router from './router'createApp(App).use(router).mount('#app')

如何使用

在template中通过router-link导航

• App.vue代码

<template><div><!-- 通过路由的name 属性，跳转到对应的路由地址  --><router-link :to="{ name: 'home' }">主页</router-link><!-- 通过路由的path 属性，跳转到对应的路由地址 --><router-link to="/about">关于</router-link><router-link to="/">登录</router-link></div><hr /><router-view></router-view>
</template><script setup lang="ts"></script>

• router-link：可理解为特殊的a标签，不同的是router-link不会在跳转时引起页面的抖动
• router-view：可理解为占位符，会在它所在的位置渲染当前 URL 路径对应的路由组件

在script中通过router实例导航（编程式导航）

• 在实际应用中，通常在渲染某个页面时需要执行一些操作，要使用编程式导航

父组件App.vue
<template><div>编程式导航：<button @click="toLogin">登录</button><button @click="toHome('/home')">主页</button><button @click="toAbout('/about')">关于</button><button @click="toLogin1('login')">登录</button></div><hr /><router-view></router-view>
</template><script setup lang="ts">
// 获取路由器实例
const router = useRouter();
console.log(router);// 返回当前路由地址
const route = useRoute();
console.log(route);// 字符串形式跳转
const toLogin = () => {router.push("/");
};
// 字符串传参
const toHome = (url: string) => {router.push(url);
};
// 对象的形式,传入path
const toAbout = (url: string) => {router.push({path: url,});
};
// 对象形式，传入name
const toLogin1 = (name: string) => {router.push({name,});
};
</script>

• Router实例
  • 获取Router实例：const router = useRouter();
  • 路由器实例中有什么：
    
• Route实例
  • 获取Route实例：const route = useRoute();
  • Route实例中有什么：
    

replace 不保存历史记录

• 在<router-link>加入属性replace

<router-link replace to="/">登录</router-link>

• 编程式导航，跳转使用router.repalce

// 字符串形式跳转
const toLogin = () => {router.replace("/");
};

• 前进、后退

    <button @click="next">前进</button><button @click="prev">后退</button>// 页面前进
const next = () => {// go中的数字代表前进几个页面router.go(1)
}
// 页面后退
const prev = () => {// router.go(-1)router.back()
}

• 在router实例中可以看到back方法其实调用的就是go(-1)方法
  

2. 路由传递数据

2.1 query传参

• 和向服务器发送get请求一样，通过浏览器传递参数

• 发送方代码：

import { useRouter} from "vue-router";
const data = ref({name:"Tom",age:18
})
const router = useRouter();
// 通过query传参
const sendData = () => {router.push({// path:"/about",name:"about",query:data.value})
}

• 接收方代码：

<template><div>姓名：{{ route.query.name }} <br>年龄：{{ route.query.age }}</div>
</template><script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();

• 浏览器中显示

http://localhost:5173/about?name=Tom&age=18

3. 嵌套路由children

• 重点是children[]

const routes1: RouteRecordRaw[] = [{path: "/user", // 浏览器中的路径name: "f-route", // 路由名称（非必需）component: () => import("@/router-child/fRoute.vue"), // 路由组件children: [{path: "", // 默认加载子路由name: "sonRoute1",component: () => import("@/router-child/sonRoute1.vue"),},{path: "sonRoute2",name: "sonRoute2",component: () => import("@/router-child/sonRoute2.vue"),},],},
];

使用子路由

path以/开头的是绝对路径，它是完整路径不受父路径影响，没有/是相对路径，需要向上找父级路径，直到找到带/的路径，并且把路径都拼接起来

• <router-link>使用的是绝对路径：父路由的path+/+子路由的path

  <router-link to="/user">第一个子路由</router-link><router-link :to="{name:'sonRoute2'}">第二个子路由</router-link><router-view></router-view>

4. 命名路由components

• 在routes中定义组件的名字
  1. 同一视图中展示多个组件，使用components的对象形式
  2. 给组件起个名字（名字随意，没有限制）

const routes2: RouteRecordRaw[] = [{path: "/", // 根路径component: () => import("@/name-views/root.vue"), // 路由组件children: [{path: "showLeft", name: "showLeft",components:{default:() => import("@/name-views/a.vue"), // default对应的是<router-view></router-view>bbb:() => import("@/name-views/b.vue"),	// bbb对应的是 <router-view name="bbb">}},{path: "showRight",name: "showRight",components: {default:() => import("@/name-views/a.vue"),ccc:() => import("@/name-views/c.vue"), // ccc对应的是 <router-view name="ccc">}},],},
];

• 在vue中使用命名组件
  1. components中的default对应到vue中的代码是<router-view></router-view>
  2. components中包含几个组件，浏览器中显示几个组件的视图
  3. 组件在浏览器的位置是由<router-view>所在的位置决定的

  <router-link to="/showLeft">显示左侧导航</router-link><br /><router-link :to="{name:'showRight'}">显示右侧导航</router-link><div><router-view name="bbb"></router-view><router-view></router-view><router-view name="ccc"></router-view></div>

• 浏览器显示结果
  

5. 重定向redirect

访问某一个路由时，自动跳转到重定向的路由

• 字符串形式

 const routes: RouteRecordRaw[] =[{path:"/",redirect::"/home", // 使用绝对路径 }
]

• 对象形式

 const routes: RouteRecordRaw[] =[{path:"/",redirect:{// path:"/home" name:"home"},}
]

• 方法

const routes = [{path: '/',redirect: to => {console.log(to) // to：当前路径的相关信息return { path: '/home', // 重定向的绝对路径query: { name："小满" } // 通过路由传参，看上面的query传参}},},
]

6. 别名alias

就是给路径起个别的名字，必须是绝对路径

• 字符串

 const routes: RouteRecordRaw[] =[{path:"/",alias:"/xiaoman",}
]

• 数组方式

 const routes: RouteRecordRaw[] =[{path:"/",alias:["/xiaoman","/daman"],}
]

• 使用

http://localhost:5173/daman
http://localhost:5173/xiaoman上面的两个地址都是指向
http://localhost:5173/

7. 路由守卫

• 在路由发生跳转前，和跳转发生后执行一些代码
• 特别注意：在守卫中跳转后，也是发生了路径的变化，所以还会重新走一次路由守卫，小心死循环

前置守卫

• 当浏览器中地址发生改变时触发

import router from "./index" // 记得导入已经创建的路由器routerrouter.beforeEach((to, from) => {console.log("to:" ,to, "from:",from)
})

• 在守卫中的路由跳转

router.beforeEach((to, from) => {// 各种条件判断if(to.path !== '/' && !localStorage.getItem('token')){return false 	// 取消当前的导航，不会向任何路由跳转return "/" 		// return的值会赋值到 to.pathreturn { path: '/' }	// return一个对象return {name:'login'}}
})

• to将要进入的目标路由
  

• from 将要离开的路由
  

• 第三个参数next（官网不建议使用）

next()的作用：next()就是通过的意思，但是通过后会继续走剩下的代码，并且next()在代码中会调用多次，不容易察觉错误

router.beforeEach((to, from, next) => {if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })else next()
})

后置守卫

• 路由加载后执行，执行的时间在vue组件加载之前

router.afterEach((to, from) => {// todo
})

实现页面加载进度条nprogress

小满视频里面是手写的，我看的困，使用现成的

首先这个进度条是假的，并不能真正的表示加载页面的进度

• 安装

pnpm add nprogress

• 在路由中使用

import NProgress from "nprogress"
import 'nprogress/nprogress.css' //这个样式必须引入NProgress.configure({ showSpinner: false }); // 取消右侧的转圈圈
// 页面跳转时开始
router.beforeEach((to, from) => {NProgress.start() // 
})
// 路由成功跳转完成后
router.afterEach((to, from) => {NProgress.done()
})

• 效果
  

8. 路由元信息

路由中添加meta属性

• 在每条单独的路由上可以添加meta属性，meta属性是一个对象，对象中可以添加很多信息

  {path:"/",component: () => import("@/views/index.vue"),meta:{title:'标题栏显示',show: true,}}

在.d.ts中增加meta的类型

import "vue-router"
declare module 'vue-router'{interface RouteMeta{title:stringicon?:string}
}

在守卫中获取meta

router.beforeEach((to, from) => {// to.metadocument.title = to.meta.title
})

在vue中获取meta

import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.meta.title)

获取父级路由的meta

假设当前路由有父级路由，则通过数组matched[]访问

import {useRoute} from 'vue-router'
const route = useRoute()
console.log(route.meta.title) // 当前路由的meta
console.log(route.matched[0].meta.title) // 父级路由的meta

9. 路由应用示例

1.过渡动效

• 给<router-view>加动画效果

使用animatecss的动画效果，参考：animatecss动画效果

• 安装animatecss

pnpm add animate.css

• 在元数据中加入要采用的动画效果

  {path: "/",name: "login",component: () => import("@/views/login.vue"),meta: {title: "登录",transition:"animate__fadeInDown" // 动画效果来自animatecss},

记得修改.d.ts中RouteMeta的类型

• 在要使用动效的vue中引入

import "animate.css";

<template><div><router-view #default="{route,Component}"> <!-- 在路由的meta中配置的动画效果，放在这里使用 --><Transition  :enter-active-class="`animate__animated ${route.meta.transition}`"><component :is="Component"></component></Transition></router-view></div>
</template>

• 插槽中的route和Component是固定的，这段代码中唯一能修改的就是Transition标签 的属性
• route：当前路由，通过route.meta访问元数据中的值
• Component：vNode，路由即将加载的vue组件

2. 滚动行为

• 记录某个组件的滚动距离，跳转到别的路由再返回时，自动滚动到刚才的位置

const router = createRouter({history: createWebHistory(),routes,scrollBehavior(to, from, savedPosition) {	// savedPosition记录滚动的距离// return 期望滚动到哪个的位置// 有滚动就滚动到记录的位置，没有滚动就回到初始位置return savedPosition ? savedPosition : { left: 0, top: 0 };},
});

• 为什么不能直接return savedPosition，如果vue中没有设置滚动条，savedPosition返回值是null，会报错

• style="overflow: auto;"想要记录滚动位置，必须在当前的vue中添加该样式

  假设有父级的vue，两个子级的vue，想要在两个子级的vue中记录滚动行为，那么两个子级的vue必须都加上 style="overflow: auto;"；如果只在父级中加该样式，滚动是可以实现，但是savedPosition的值为null

• 延时滚动

  scrollBehavior(to, from, savedPosition) {// return 期望滚动到哪个的位置return new Promise((resolve)=>{setTimeout(() => {resolve(savedPosition ? savedPosition : { left: 0, top: 0 });},1000)})// return savedPosition ? savedPosition : { left: 0, top: 0 };},