Vue Router
Vue Router 是 Vue.js 的官方路由。
它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。
功能包括:
-
嵌套路由映射
-
动态路由选择
-
模块化、基于组件的路由配置
-
路由参数、查询、通配符
-
展示由 Vue.js 的过渡系统提供的过渡效果
-
细致的导航控制
-
自动激活 CSS 类的链接
-
HTML5 history 模式或 hash 模式
-
可定制的滚动行为
-
URL 的正确编码
安装
直接下载 / CDN
https://unpkg.com/vue-router@4
Unpkg.com 提供了基于 npm 的 CDN 链接。
上述链接将始终指向 npm 上的最新版本。
你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。
这将把 Vue Router 暴露在一个全局的 VueRouter 对象上,例如 VueRouter.createRouter(…)。
包管理器
对于一个现有的使用 JavaScript 包管理器的项目,你可以从 npm registry 中安装 Vue Router:
npm install vue-router@4
如果你打算启动一个新项目,你可能会发现使用 create-vue 这个脚手架工具更容易,它能创建一个基于 Vite 的项目,并包含加入 Vue Router 的选项:
npm create vue@latest
选项:
Vue.js - The Progressive JavaScript Framework
√ 请输入项目名称: ... vue-project
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要 cypress/nightwatch/playwright
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是
正在初始化项目 D:\js\vue-router\demo\vue-project...
项目初始化完成,可执行以下命令:
cd vue-project
npm install
npm run dev
对应的 package.json
{
"name": "vue-project",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force"
},
"dependencies": {
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@tsconfig/node20": "^20.1.4",
"@types/node": "^20.12.5",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/tsconfig": "^0.5.1",
"npm-run-all2": "^6.1.2",
"typescript": "~5.4.0",
"vite": "^5.2.8",
"vue-tsc": "^2.0.11"
}
}
不得不说这种代码生成体验非常好。
参考资料
https://github.com/jekip/naive-ui-admin
https://router.vuejs.org/zh/guide/
更多学习
更多实时资讯,前沿技术,生活趣事。尽在【老马啸西风】
交流社群:[交流群信息](https://mp.weixin.qq.com/s/rkSvXxiiLGjl3S-ZOZCr0Q)