目录
1 介绍
Vue
很适合用来构建单页面应用。对于大多数此类应用,都推荐使用官方支持的Vue Router
;在单页面应用(Single-page application)中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,因为这类场景下用户通常会在很长的一段时间中做出多次交互。这类的单页面应用中,路由的更新是在客户端执行的。
Vue Router
是 Vue 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
以下我们来介绍Vue Router
的基本使用。
2 Vue Router的使用
2.1 安装
对于vue3,我们推荐使用vue-router 4.x及以上版本。node环境安装如下:
npm install vue-router@4
2.2 引入
在我们工程项目中,路由文件通常需要单独管理,以便于后续的使用以及维护。再此基础下,我们引入分为两步:
- 创建统一管理路由入口文件
- vue项目引入使用路由入口文件
2.2.1 创建路由文件
在与main.ts文件的同级目录下创建router文件夹,并添加index.ts文件(使用ts,若使用js也同理)。
文件内容如下:
import {
createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 项目其他页面路由(推荐使用)
import Practice from "../router/practiceFolder/practice";
// vue项目自带路由
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
];
const routers = [...routes, ...Practice];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [...routes, ...Practice]
});
export default router;
其中,使用RouteRecordRaw
声明的对象会被当做路由对象,放入到路由对象池里。
createRouter
创建路由;
createWebHistory
代表路由使用 HTML5 模式,也是推荐使用的模式;
2.2.2 main.ts 引入
代码如下:
import {
createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.mount("#app");
2.3 使用
2.3.1 router-view使用
入之后我们单页面应用可以在app.vue
配置使用router-view
来切换页面,代码如下:
<template>
<router-view v-slot="{ Component }">
</router-view>
</template>
引入之后,在 Vue 实例中,你可以通过 $router
访问路由实例,若想要导航到不同的 URL,使用this.$router.push(...)
进行跳转
详细的router-view
使用方法可见vue router-view使用详解
2.3.2 router-link使用
当使用 <router-link>
时,内部会调用router.push(...)
这个方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
2.3.3 在 setup
中访问路由和当前路由
因为我们在 setup
里面没有访问 this
,所以我们不能再直接访问 this.$router
或 this.$route
。作为替代,我们使用 useRouter
和 useRoute
函数:
import {
useRouter, useRoute } from 'vue-router'
export default {
setup() {
const router = useRouter()
const route = useRoute()
function pushWithQuery(query) {
router.push({
name: 'about',
query: {
...route.query,
},
})
}
},
}
2.4 其他API
除以上介绍的Vue Router
基本API,还有如下API可供使用:
- NavigationFailureType: 导航失败类型
- START_LOCATION: 默认开始位置
- createMemoryHistory: 使用记忆历史模式
- createRouterMatcher:
- createWebHashHistory: 创建哈希模式
- createWebHistory: 创建html5模式
- isNavigationFailure: 导航是否失败
- onBeforeRouteLeave: 导航守卫,setup中使用,在当前位置的组件将要离开时触发。
- onBeforeRouteUpdate: 导航守卫,setup中使用,在当前位置即将更新时触发。
- parseQuery: 解析query参数
- stringifyQuery: 字符串query参数
- useLink: 将RouterLink 的内部行为作为一个组合式 API 函数公开。
- useRoute: 替代this.$route
- useRouter: 替代this.$router
本文参考官网,进行vue3路由配置实际操作,更加全面的使用请参考官网vue router。