1.github地址:https://github.com/vuejs/vue-router
2.官方文档地址:https://router.vuejs.org/zh/
3.Vue-Router安装:npm i vue-router --save
安装完成后,会在项目的package.json文件中显示vue-router插件,如下:
"dependencies": { "animate.css": "^3.7.2", "element-ui": "^2.13.1", "moment": "^2.24.0", "pubsub-js": "^1.8.0", "shortid": "^2.2.15", "vant": "^2.6.3", "vue": "^2.5.2", "vue-router": "^3.1.6" },
4. 配置路由:
4.1. 在src文件夹中新建一个router.js文件,内容:
import Vue from 'vue' //引入vue import Router from 'vue-router' //引入路由 Vue.use(Router); //表示在Vue中使用Router //要应用于整个项目,需要向外配置一个实例 export default new Router({ routes:[ //此处可以添加路由位置 ], }); // 配置一个实例
4.2.在main.js中引用,内容如下:
//导入router import router from './router.js'
new Vue({
el: '#app',
// router:router, //在Vue实例中引用router
router, //也可以
components: { App },
template: '<App/>'
});
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构