Vue3.0使用router
- 一、简介
- [二、Vue Router的使用](#二、Vue Router的使用)
-
- [2.1 安装](#2.1 安装)
- [2.2 引入](#2.2 引入)
-
- [2.2.1 创建统一管理路由的入口文件](#2.2.1 创建统一管理路由的入口文件)
- [2.2.2 引入路由入口文件](#2.2.2 引入路由入口文件)
- 三、使用
-
- [3.1 在setup中使用](#3.1 在setup中使用)
一、简介
Vue 很适合用来构建单页面应用。对于大多数此类应用,都推荐使用官方支持的Vue Router;在单页面应用(Single-page application)中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,因为这类场景下用户通常会在很长的一段时间中做出多次交互。这类的单页面应用中,路由的更新是在客户端执行的。
Vue Router 是 Vue 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
二、Vue Router的使用
2.1 安装
在Vue3中,我们推荐使用vue-router 4.x及以上版本。
bash
npm install vue-router@4
2.2 引入
在我们的前端工程中,路由一般需要单独管理,以便后续的管理和维护。在此基础上,我们将引入分为两个步骤,即:
- 创建统一管理路由入口文件
- 引入使用路由入口文件
2.2.1 创建统一管理路由的入口文件
在main.ts(js)同级的目录上创建 router 文件夹,并添加index.ts文件,index.ts文件内容如下:
ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../view/home/index.vue";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
2.2.2 引入路由入口文件
在main.ts中引入路由,并注册,代码如下:
ts
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
三、使用
3.1 在setup中使用
ts
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,
},
})
}
},
}