vue-router路由文档详解

介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

一、安装

直接下载 / CDN

https://unpkg.com/vue-router@4

npm安装

npm install vue-router@4

开发版本构建

如果你想使用最新的开发版本，你需要直接从 GitHub 上克隆并自己构建 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

二、使用方法

新建router模块

在src目录下创建一个router目录，里面再创建一个index.js/index.ts文件，这个目录就是router模块

import { createRouter, createWebHashHistory } from "vue-router";
const routers = [{path: '/',component: () => import('../views/Index/Index.vue')},{path: '/login',component: () => import('../views/Login/Login.vue')}
]export const router = createRouter({history: createWebHashHistory(),routes: routers
})export default router

挂载路由

在main.js/main.ts文件添加router

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index'const app = createApp(App);
app.use(router);
app.mount('#app')

然后在App.vue文件中使用router-view将组件或页面渲染到这里

<template><router-view></router-view>
</template><script lang="ts">
import { Options, Vue } from 'vue-class-component';@Options({components: { },
})
export default class App extends Vue {}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

最后在用到路由的组件通过router-view组件或者router-link跳转

<script lang="ts"></script>
<template><van-button type="primary">首页</van-button><router-link to="/login"><van-button type="success">登录</van-button></router-link>
</template>

使用@别名作为根目录

在vite.config.ts文件中引入path并配置

import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';// https://vitejs.dev/config/
const root = process.cwd()
function pathResolve(dir: string) {return resolve(root, '.', dir);
}
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),styleImport({resolves: [VantResolve()],}),],resolve: {extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],alias: [{find: /\@\//,replacement: `${pathResolve('src')}/`}]},server: {// host: '192.168.0.221',}
})

然后就可以在相应的地方使用啦,如：router配置文件中

import { createRouter, createWebHashHistory } from "vue-router";
const routers = [{path: '/',component: () => import('@/views/Index/Index.vue')},{path: '/login',component: () => import('@/views/Login/Login.vue')},{path: '/users/:id',component: () => import('@/views/Users/Users.vue')}
]export const router = createRouter({history: createWebHashHistory(),routes: routers
})export default router

动态路由匹配

const routers = [{// 动态字段以冒号开始path: '/users/:id',component: () => import('../views/Users/Users.vue')},
]

<template><h3>User ID :{{$route.params.id}}</h3>
</template><script>
export default {name: "Users"
}
</script><style scoped></style>

vue-router路由文档详解相关推荐

英集芯ip6809规格书pdf芯片文档详解及典型电路原理图
英集芯ip6809芯片是一款无线充电发送端控制器SOC芯片,兼容WPC Qi v1.2.4新标准.支持2-3线圈无线充电发射端应用,支持A28线圈.MP-A8线圈,支持客户线圈定制方案,支持5W.苹果 ...
jsoup解析和遍历一个html文档详解
解析和遍历一个HTML文档如何解析一个HTML文档: String html = "<html><head><title>First parse< ...
在MyEclipse中使用javadoc导出API文档详解
本篇文档介绍如何在MyEclipse中导出javadoc(API)帮助文档,并且使用htmlhelp.exe和jd2chm.exe生成chm文档. 具体步骤如下: 打开MyEclipse,选中想要制作 ...
【PDF】java使用Itext生成pdf文档--详解
[API接口] 一.Itext简介 API地址:javadoc/index.html:如 D:/MyJAR/原JAR包/PDF/itext-5.5.3/itextpdf-5.5.3-javadoc/i ...
BH1750 光照传感器文档详解及驱动设计
前言最近接触到一个应用,需要在低功耗的产品上加上光照度采集,正好最近有接触到一款光照传感器 BH1750 ,性能价格都合适,那么今天就抽空来好好测试一下. 那么要写一篇测试文章,我会尽量以新手的角度 ...
Swagger文档详解
1.Swagger介绍 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务(http s://swagger.io/). 它的主要作用是: 使得 ...
webservice的WSDL文档详解
WSDL – WebService Description Language – Web服务描述语言. –通过XML形式说明服务在什么地方-地址 –通过XML形式说明服务提供什么样的方法 – 如何调用 ...
Dubbo2.7文档详解
本篇博文参考dubbo官方文档本编博文参考javaguide之rpc 文章目录一.RPC 1.1 什么是 RPC? 1.2 为什么要用 RPC? 1.3 RPC 能帮助我们做什么呢? 1.4 RP ...
第5节：开发微信小程序之文档详解
前言前面4节,我们讲解了为什么要开这一个专栏,以及第一个小程序Hello World,与其说第一个小程序,不如说微信开发者工具为我们创建了一个基础工程项目!然后,又开发了一个真正实现突破0的小程序- ...
网络抓包工具翻译帮助文档详解教程
How To Set Up a Capture 1. 确保你做的事是被允许的! (1)意思是在不违反法律的情况下抓取可以被允许抓取的包. 2.一般设置 (1)权限的设置,你是否有权限去获取用户或者管理 ...