Vue 3.0使用router

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 引入

在我们的前端工程中,路由一般需要单独管理,以便后续的管理和维护。在此基础上,我们将引入分为两个步骤,即:

  1. 创建统一管理路由入口文件
  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,
        },
      })
    }
  },
}
相关推荐
拓端研究室31 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子2 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端4 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~4 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头6 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's6 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js