路由基础使⽤
作⽤：vue-router是Vue官⽅的路由管理器，是⼀个⽤来实现 SPA(single page web application) 的vue 插件。它和 Vue.js 的核⼼深度集成，让构建单⻚⾯应⽤变得易如反掌。
官⽅⽂档：vue-router
安装： npm install vue-router@4
使⽤步骤：
1. 路由配置
import { createRouter, createWebHashHistory, createWebHistory } from "vue
router";
import Login from '../views/Login.vue'
const routes = [
{
path: "/",
name: "login",
component: Login
},
{
path: "/register",
name: "register",
component: () =>
import( "../views/Register.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router;
2. 主⽂件引⼊
import { createApp } from 'vue'
import './style.css'
import router from './router/index'
import App from './App.vue'
createApp(App).use(router).mount('#app')
3. 组件使⽤
<template>
<router-link to="/">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</template>
<script setup>
import { ref, reactive } from 'vue';
</script>
<style scoped>
</style>
路由属性配置说明
routes: [
{
path: string, //路径
component: Component; //⻚⾯组件
name: string; // 命名路由-路由名称
components: { [name: string]: Component }; // 命名视图组件
redirect: string | Location | Function; // 重定向
props: boolean | string | Function; // 路由组件传递参数
alias: string | Array<string>; // 路由别名
children: Array<RouteConfig>; // 嵌套⼦路由
beforeEnter?: (to: Route, from: Route, next: Function) => void;
// 路由单独钩⼦
meta: any; // ⾃定义标签属性，⽐如：是否需要登录
icon: any; // 图标
// 2.6.0+
caseSensitive: boolean; // 匹配规则是否⼤⼩写敏感？(默认值：false)
pathToRegexpOptions: Object; // 编译正则的选项
}
]
编程式路由导航
作⽤：通过js语句实现路由跳转
常⽤API：
| API | 作⽤ |
|---|---|
| router.push(path) | 相当于点击路由链接(可以返回到当前路由界⾯) |
| router.replace(path) | ⽤新路由替换当前路由(不可以返回到当前路由界⾯) |
| router.back() | 请求(返回)上⼀个记录路由 |
| router.go(-1) | 请求(返回)上⼀个记录路由 |
| router.go(1) | 请求下⼀个记录路由 |
示例
<template>
<div class="container">
<div class="login-wrapper">
<div class="header">Login</div>
<div class="form-wrapper">
<input type="text" name="username" placeholder="username"
class="input-item">
<input type="password" name="password" placeholder="passwo
rd" class="input-item">
<div class="btn" @click="login">Login</div>
</div>
<div class="msg">
Don't have account?
<a href="#" @click.prevent="register">Sign up</a>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
// 创建⼀个路由的管理员
const router = useRouter();
// 登录
function login(){
// 跳转⾸⻚
router.push('/home');
}
// 前往注册⻚
function register(){
console.log(router);
// 跳转注册⻚
router.push('/register');
}
</script>
路由传值
作⽤：路由跳转时传递参数
分类：
- query
- 可以传递多个参数
域名/list?name=aaa&pass=bbb - 不需要额外配置路由
- param
特点：
- 需要额外配置路由
示例：query与params的实现
================================Login.vue================================
<template>
<div class="container">
<div class="login-wrapper">
<div class="header">Login</div>
<div class="form-wrapper">
<input type="text" name="username" placeholder="usernam
e" class="input-item">
<input type="password" name="password" placeholder="passw
ord" class="input-item">
// query⽅式实现
<div class="btn" @click="login">Login</div>
<router-link :to="{ path: '/home', query: adObj }">前往ho
me⻚</router-link>
</div>
<div class="msg">
Don't have account?
// params⽅式实现
<a href="#" @click.prevent="register">注册</a>
<br>
<router-link :to="{ name: 'register', params: address }">
跳转注册⻚</router-link>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const adObj = ref({
title: '让乡村宜居⼜宜业',
content: '近年来，河南省修武县的⺠宿“云上院⼦”声誉鹊起，慕名来访者络绎不绝，节假
⽇更是⼀房难求。曾经河南省北部云台⼭深处⼀处年久失修的废弃⼩学，经过“⽂艺范⼉”的改造，
蝶变成当地有代表性的⺠宿之⼀。'
})
// 由于路由表中没有配置接收province的字段，所以传递的这个字段是浪费的，在跳转的路由⻚
⾯获取不到的
const address = ref({ city: '合肥', code: '0551', province: '安徽' });
// 创建⼀个路由的管理员
const router = useRouter();
// 登录
function login() {
// 跳转⾸⻚
router.push({
path: '/home',
query: adObj.value
});
}
// 前往注册⻚
function register() {
console.log(router);
// 跳转注册⻚
router.push({ name: 'register', params: address.value });
}
</script>
============================Register.vue=================================
==
<template>
<h2>这是来⾃{{ city }}的⽤户正在注册</h2>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
// 路由的信息集合
const route = useRoute();
// 当前城市信息
const city = ref('');
onMounted(() => {
// 获取params传递过来的参数
console.log(route.params);
city.value = route.params.city
// 后续的操作
// ...axios
})
</script>
<style scoped></style>
==========================routers/index.js===============================
==
import { createRouter, createWebHashHistory, createWebHistory } from 'vue
-router'
import Login from '../views/Login.vue'
// import About from '../views/About.vue'
// 创建路由表
const routes = [
{
path: '/',
component: Login,
},
{
path: '/home',
component: () => import('../views/Home.vue'),
},
{
path: '/register/:city/:code',
name: 'register',
component: () => import('../views/Register.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../views/About.vue')
},
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这⾥输⼊更多的配置，但我们在这⾥
// 暂时保持简单
const router = createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起⻅，我们在这⾥使⽤ hash 模式。
history: createWebHistory(),
routes, // `routes: routes` 的缩写
})
嵌套路由
案例：实现⻚⾯的⼆级导航
示例：
import Vue from 'vue'
import { createRouter, createWebHashHistory, createWebHistory } from "vue
router";
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Ad from '../views/Ad.vue'
export default createRouter({
routes: [{
path: '/login',
component: Login
}, {
path: '/home',
component: Home,
children:[
{
// 注意：path配置的值，最左侧的/永远是根路由
path:'/home/news',
component:News
},
{
// 简化写法，path前⾯不加/，那么就代表是⽗路径下的某个路径
path:'ad',
component:Ad
},
{
path:"",
redirect:"news"
}
]
},{
path:'/',
redirect:'/login'
}
]
})
========================================================
<template>
<div>
<div>
<ul>
<li>
<router-link to="/home/news">新闻</router-link>
</li>
<li>
<router-link to="/home/ad">⼴告</router-link>
</li>
</ul>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script setup>
</script>
<style scoped></style>
路由守卫
路由守卫⽤于在导航到路由或离开路由时执⾏特定的操作，⽐如验证⽤户权限、检查登录状态等。在 Vue 3中，路由守卫分为全局守卫、路由独享守卫和组件内守卫。
全局守卫
全局守卫直接作⽤于整个应⽤的路由。Vue Router提供了 beforeEach 、 beforeResolve
和 afterEach 这三个全局守卫钩⼦函数。
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [...yourRoutes]
});
// to:即将要进⼊的⽬标
// from：当前导航正要离开的路由
// next下⼀步要做什么
router.beforeEach((to, from, next) => {
// 在路由导航之前执⾏操作
// 可以进⾏身份验证、权限检查等
next(); // 调⽤ next() 继续导航
});
router.beforeResolve((to, from, next) => {
// 在导航被确认之前，所有组件内的守卫和异步路由组件被解析之后执⾏
next();
});
router.afterEach((to, from) => {
// 在导航成功完成后执⾏，可以⽤来记录路由变化等操作
});
路由独享守卫
路由独享守卫作⽤于单个路由对象上，可以通过在路由配置中定义beforeEnter来使⽤。
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/example',
component: ExampleComponent,
beforeEnter: (to, from, next) => {
// 在进⼊特定路由前执⾏操作
next();
}
},
// Other routes...
]
});
组件内守卫
组件内守卫⽤于在组件内部定义的路由守卫，可⽤于单个组件内。
import { onBeforeRouteEnter, onBeforeRouteLeave, onBeforeRouteUpdate } fro
m 'vue-router';
const Component = {
// 在组件进⼊路由前执⾏
beforeRouteEnter(to, from, next) {
// ⽆法访问 this，但可以通过回调获取实例
next(vm => {
// 通过 `vm` 访问组件实例
});
},
// 在路由更新时调⽤
beforeRouteUpdate(to, from, next) {
// 可以访问 this
next();
},
// 在离开当前路由时调⽤
beforeRouteLeave(to, from, next) {
// 可以访问 this
next();
}
};
