1、安装
注意使用Vue3 对应安装4.X版本以上,VUE2 要使用3.X
vue-router@可以指定版本号
npm install vue-router -S
2、搭建Router
- 在src目录下新建router文件夹,在文件夹新建index.ts
- src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: () => import("../components/login.vue"),
},
{
path: "/reg",
component: () => import("../components/reg.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
3、三种路径跳转
- App.vue
第一种:
必须加<router-view>,否则不显示
<template>
<div>测试Router</div>
<div>
<router-link to="/">Login</router-link>
<router-link style="margin-left: 10px;" to="/reg">Reg</router-link>
</div>
<hr>
<router-view></router-view>
</template>
<script setup lang="ts">
</script>
<style></style>
- 第二种方式,使用name
- 把index.ts改成:
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Login",
component: () => import("../components/login.vue"),
},
{
path: "/reg",
name: "Reg",
component: () => import("../components/reg.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
App.vue 使用绑定方式:
<template>
<div>测试Router</div>
<div>
<router-link :to="{ name: 'Login' }">Login</router-link>
<router-link style="margin-left: 10px;" :to="{ name: 'Reg' }">Reg</router-link>
</div>
<hr>
<router-view></router-view>
</template>
<script setup lang="ts">
</script>
<style></style>
第三种方式,通过push方式
<template>
<div>测试Router</div>
<div>
<button @click="toPage('/')">Login</button>
<button @click="toPage('/reg')">Reg</button>
</div>
<hr>
<router-view></router-view>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const toPage = (url: string) => {
//字符串
router.push(url)
}
</script>
<style></style>
- 对象的形式
const toPage = (url: string) => {
// //字符串
// router.push(url)
//对象形式
router.push({
path: url
})
}
- 命名方式
<template>
<div>测试Router</div>
<div>
<!-- <button @click="toPage('/')">Login</button>
<button @click="toPage('/reg')">Reg</button> -->
<button @click="toPage('Login')">Login</button>
<button @click="toPage('Reg')">Reg</button>
</div>
<hr>
<router-view></router-view>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const toPage = (url: string) => {
// //字符串
// router.push(url)
//对象形式
// router.push({
// path: url
// })
//命名方式
router.push({
name: url
})
}
</script>
<style></style>
4、历史记录处理
历史记录用在自己vue控制前进和后台,便于切换页面内容
- router-link replace 是没有历史记录的
- router.replace 也是没有历史记录的
<template>
<div>测试Router</div>
<div>
<!-- <button @click="toPage('/')">Login</button>
<button @click="toPage('/reg')">Reg</button> -->
<button style="margin-left: 10px;" @click="toPage('Login')">Login</button>
<button style="margin-left: 10px;" @click="toPage('Reg')">Reg</button>
<button style="margin-left: 10px;" @click="next()">next</button>
<button style="margin-left: 10px;" @click="prev()">prev</button>
</div>
<hr>
<router-view></router-view>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const toPage = (url: string) => {
// //字符串
// router.push(url)
//对象形式
// router.push({
// path: url
// })
//命名方式
router.push({
name: url
})
}
const next = () => {
router.go(1);
}
const prev = () => {
router.back()
}
</script>
<style></style>
5、路由传参
1)Query路由传参方式
前置数据准备:list.json
{
"data":[
{
"name":"(黑丝)脚踩老坛酸菜",
"price":500,
"id":1
},
{
"name":"伤肺火腿肠",
"price":800,
"id":1
},
{
"name":"(假)翡翠玉石",
"price":80000,
"id":3
}
]
}
- 传参入口:login.vue
<template>
<!-- <div class="login">
Login
</div> -->
<div>嗨,我是列表页面</div>
<table cellspacing="0" class="table" border="1">
<thead>
<tr>
<th>品牌</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in data">
<th>{{ item.name }}</th>
<th>{{ item.price }} </th>
<th>
<button @click="toDetail(item)">详情</button>
</th>
</tr>
</tbody>
</table>
</template>
<script setup lang='ts'>
import { data } from "./list.json";
import { useRouter } from "vue-router";
const router = useRouter();
type Item = {//自定义数据类型,对象形式
name: string;
price: number;
id: number;
}
const toDetail = (item: Item) => {
router.push({
path: '/reg',
query: item //使用对象传参
})
}
</script>
<style scoped>
.login {
background: green;
height: 400px;
width: 400px;
font-size: 20px;
color: white;
}
</style>
- 如何接受呢?reg.vue来接收
<template>
<div>
<button @click="router.back()">返回</button>
<h3>喝喝!我是详情页面</h3>
</div>
<div>品牌:{{ route.query.name }}</div>
<div>价格:{{ route.query.price }}</div>
<div>品牌:{{ route.query.id }}</div>
</template>
<script setup lang='ts'>
import { data } from "./list.json";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
</script>
<style scoped>
.reg {
background: red;
height: 400px;
width: 400px;
font-size: 20px;
color: white;
}
</style>
效果:
2) name+params方式传参–4.14版本后已经不能用
3)动态路由传参
{
path: "/reg/:id",//定义id
name: "Reg",
component: () => import("../components/reg.vue"),
},
router.push({
name: 'Reg',
params: {
id: item.id
}
})
- 使用地方
<template>
<div>
<button @click="router.back()">返回</button>
<h3>喝喝!我是详情页面</h3>
</div>
<div>品牌:{{ item?.name }}</div>
<div>价格:{{ item?.price }}</div>
<div>品牌:{{ item?.id }}</div>
</template>
<script setup lang='ts'>
import { data } from "./list.json";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const item = data.find(v => v.id === Number(route.params.id))
</script>
<style scoped>
.reg {
background: red;
height: 400px;
width: 400px;
font-size: 20px;
color: white;
}
</style>
query 和params区别
-
query 传参配置的是 path,而 params 传参配置的是name,在 params中配置 path 无效
-
query 在路由配置不需要设置参数,而 params 必须设置
-
query 传递的参数会显示在地址栏中
-
params传参刷新会无效,但是 query 会保存传递过来的值,刷新不变 ;
6、嵌套路由
- 父路由
<template>
<div>
<RouterView></RouterView>
<hr>
<h1>我是父路由</h1>
<div>
<router-link to="/user">Login</router-link>
<router-link style="margin-left: 10px;" to="/user/reg">Reg</router-link>
</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped></style>
路由也要改成:
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/user",
component: () => import("../components/footer.vue"),
children: [
{
path: "",
name: "Login",
component: () => import("../components/login.vue"),
},
{
path: "reg",
name: "Reg",
component: () => import("../components/reg.vue"),
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
7、命名视图
通过命名视图可以定义tab标签
App.vue
<template>
<router-view></router-view>
</template>
<script setup lang="ts">
</script>
<style></style>
index.ts --路由编写
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: () => import("../components/root.vue"),
children: [
{
path: "/user1",
components: {
default: () => import("../components/A.vue"),
},
},
{
path: "/user2",
components: {
bbb: () => import("../components/B.vue"),
ccc: () => import("../components/C.vue"),
},
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
在root.vue路径使用
<template>
<div>
<h1>root</h1>
<router-link to="/user1">/user1</router-link>
<router-link style="margin-left: 30px;" to="/user2">/user2</router-link>
<hr>
<router-view></router-view>
<router-view name="bbb"></router-view>
<router-view name="ccc"></router-view>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped></style>
8、重定向 -别名
- 重定向
//第一种方式 字符串
redirect: "/user1", //重定向
//第二种方式 对象方式
redirect: {
path: "user1",
},
//第三种方式 to方式
redirect: (to) => {
console.log(to, "=>");
return {
path: "/user1",
query: {
name: "小满",
},
};
},
- 别名
alias: ["/root", "/root1", "/root2"],
9、导航守卫
使用element-plus 举例
9.1 全局前置守卫
先安装 element-plus
npm install element-plus -S
- vite.config.ts 提醒使用npm init vue@latest 创建项目
- 选择ts router pinia
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
作用:能够拦截登录以后路径
- main.ts
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import router from './router'
import ElementUi from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(ElementUi)
const whiteList = ['/']
//全局前置守卫
router.beforeEach((to, from, next) => {
let token = localStorage.getItem('token')
//白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
if (whiteList.includes(to.path) || token) {
//token每次都要跟后端校验一下是否过期
//另外说一下beforeEach可以定义不止一个,vue会收集你所有定义的路由钩子,所以next的作用不应该是跳转,而是使步骤进行到下一个你定义的钩子
next()
} else {
//否则跳转登录界面
next('/')
}
})
app.mount('#app')
- App.vue
<template>
<router-view></router-view>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>
<style>
* {
padding: 0;
margin: 0;
}
html,
body,
#app {
height: 100%;
overflow: hidden;
}
</style>
- index.ts —路由配置
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: () => import('@/views/Login.vue')
},
{
path: '/index',
component: () => import('@/views/Index.vue')
}
]
})
export default router
- login.vue
<template>
<div class="login">
<el-form ref="form" :rules="rules" :model="formInline" class="demo-form-inline">
<el-form-item prop="user" label="账号:">
<el-input v-model="formInline.user" placeholder="请输入账号" />
</el-form-item>
<el-form-item prop="password" label="密码:">
<el-input v-model="formInline.password" placeholder="请输入密码" type="password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">登陆</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import router from '../router';
import { ElMessage, FormRules, FormInstance } from 'element-plus'
const formInline = reactive({
user: '',
password: '',
})
const form = ref<FormInstance>()
const rules: FormRules = reactive({
user: [{
required: true,
message: "请输入账号",
type: "string"
}],
password: [{
required: true,
message: "请输入密码",
type: "string"
}]
})
const onSubmit = () => {
console.log('submit!', form.value)
form.value?.validate((validate) => {
if (validate) {
router.push('/index')
localStorage.setItem('token', '1')
} else {
ElMessage.error('请输入完整')
}
})
}
</script>
<style lang='less' scoped>
.login {
height: 100%;
display: flex;
justify-content: center; //居中
align-items: center;
}
</style>
- Index.vue -登录后的页面
<template>
<div>
哈哈,我进来了
</div>late>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>
<style lang='less' scoped></style>
退出登陆时,把 localStorage.setItem(‘token’, ‘1’) 删除token这样就可以实现退出了
9.2 全局后置守卫
App.vue
<template>
<router-view></router-view>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>
<style>
* {
padding: 0;
margin: 0;
}
html,
body,
#app {
height: 100%;
overflow: hidden;
}
</style>
- loadingBar.vue
<template>
<div class="wraps">
<div ref="bar" class="bar"></div>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
let speed = ref<number>(1)
let bar = ref<HTMLElement>()
let timer = ref<number>(0) //设置id
const startLoading = () => {
let dom = bar.value as HTMLElement
speed.value = 1
console.log(dom);
timer.value = window.requestAnimationFrame(function fn() {//不用箭头函数的原因,递归
if (speed.value < 90) {
speed.value += 1;
dom.style.width = speed.value + '%'
timer.value = window.requestAnimationFrame(fn) //递归
} else {
speed.value = 1;
window.cancelAnimationFrame(timer.value)
}
})
}
const endLoading = () => {
let dom = bar.value as HTMLElement
setTimeout(() => {
window.requestAnimationFrame(() => {
speed.value = 100;
dom.style.width = speed.value + '%'
})
}, 500)
}
// 放到全局导航守卫-后置守卫 后不需要了
// //只有在 onMounted 之后才能获取 DOM
// onMounted(() => {
// startLoading()
// endLoading()
// })
defineExpose({
startLoading,
endLoading,
})
</script>
<style lang='less' scoped>
.wraps {
position: fixed;
top: 0;
width: 100%;
height: 2px;
.bar {
height: inherit;
width: 0;
background: blue;
}
}
</style>
- main.ts
import { createApp, createVNode, render } from 'vue'
// import './style.css'
import App from './App.vue'
import router from './router'
import ElementUi from 'element-plus'
import 'element-plus/dist/index.css'
import loadingBarVue from './components/loadingBar.vue'
console.log(loadingBarVue) //不能直接使用
const Vnode = createVNode(loadingBarVue) //转成虚拟Dom
render(Vnode, document.body) //挂载
const app = createApp(App)
app.use(router)
app.use(ElementUi)
const whiteList = ['/']
//全局前置守卫
router.beforeEach((to, from, next) => {
Vnode.component?.exposed?.startLoading()
let token = localStorage.getItem('token')
//白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
if (whiteList.includes(to.path) || token) {
//token每次都要跟后端校验一下是否过期
//另外说一下beforeEach可以定义不止一个,vue会收集你所有定义的路由钩子,所以next的作用不应该是跳转,而是使步骤进行到下一个你定义的钩子
next()
} else {
//否则跳转登录界面
next('/')
}
})
//全局后置守卫
router.afterEach((to, from) => {
Vnode.component?.exposed?.endLoading()
})
app.mount('#app')
10、路由元信息
在上面例子index.ts
11、路由过度动效
想要在你的路径组件上使用转场,并对导航进行动画处理,你需要使用 v-slot API:
使用 animate.css
main.ts
import 'animate.css'
src/App.vue
<router-view #default="{route,Component}">
<transition :enter-active-class="`animate__animated ${route.meta.transition}`">
<component :is="Component"></component>
</transition>
</router-view>
上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡,你可以将元信息和动态的 name
结合在一起,放在<transition>
上:
declare module 'vue-router'{
interface RouteMeta {
title:string,
transition:string,
}
}
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: () => import('@/views/Login.vue'),
meta:{
title:"登录页面",
transition:"animate__fadeInUp",
}
},
{
path: '/index',
component: () => import('@/views/Index.vue'),
meta:{
title:"首页!!!",
transition:"animate__bounceIn",
}
}
]
})
12、路由的滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。
当创建一个 Router 实例,你可以提供一个 scrollBehavior
方法
const router = createRouter({
history: createWebHistory(),
scrollBehavior: (to, from, savePosition) => {
console.log(to, '==============>', savePosition);
return new Promise((r) => {
setTimeout(() => {
r({
top: 10000
})
}, 2000);
})
},
scrollBehavior
方法接收 to 和 from 路由对象。第三个参数 savedPosition
当且仅当 popstate
导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
scrollBehavior 返回滚动位置的对象信息,长这样:
{ left: number, top: number }
const router = createRouter({
history: createWebHistory(),
scrollBehavior: (to, from, savePosition) => {
return {
top:200
}
},
13、动态路由
我们一般使用动态路由都是后台会返回一个 路由表 )前端通过调接口拿到后处理(后端处理路由)
主要使用的方法就是 router.addRoute
13.1添加路由
动态路由主要通过两个函数实现。router.addRoute()
和 router.removeRoute()
。
它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push()
或 router.replace()
来手动导航,才能显示该新路由
router.addRoute({ path: '/about', component: About })
13.2删除路由
有几个不同的方法来删除现有的路由:
- 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
- 通过调用
router.addRoute()
返回的回调:
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
当路由没有名称时,这很有用。
- 通过使用
router.removeRoute()
按名称删除路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
需要注意的是,如果你想使用这个功能,但又想避免名字的冲突,可以在路由中使用 Symbol
作为名字。
当路由被删除时,所有的别名和子路由也会被同时删除
13.3查看现有路由
Vue Router 提供了两个功能来查看现有的路由:
- router.hasRoute():检查路由是否存在。
- router.getRoutes():获取一个包含所有路由记录的数组。
13.4前端代码
注意一个事项 vite 在使用动态路由的时候无法使用别名@ 必须使用相对路径
const initRouter = async () => {
const result = await axios.get('http://localhost:9999/login', { params: formInline });
result.data.route.forEach((v: any) => {
router.addRoute({
path: v.path,
name: v.name,
//这儿不能使用@
component: () => import(`../views/${v.component}`)
})
router.push('/index')
})
console.log(router.getRoutes());
}
13.5后端代码 nodejs express
import express, { Express, Request, Response } from 'express'
const app: Express = express()
app.get('/login', (req: Request, res: Response) => {
res.header("Access-Control-Allow-Origin", "*");
if (req.query.user == 'admin' && req.query.password == '123456') {
res.json({
route: [
{
path: "/demo1",
name: "Demo1",
component: 'demo1.vue'
},
{
path: "/demo2",
name: "Demo2",
component: 'demo2.vue'
},
{
path: "/demo3",
name: "Demo3",
component: 'demo3.vue'
}
]
})
}else{
res.json({
code:400,
mesage:"账号密码错误"
})
}
})
app.listen(9999, () => {
console.log('http://localhost:9999');
})