随笔 - 633,  文章 - 0,  评论 - 13,  阅读 - 48万
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

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/>'
});

复制代码

 

posted on   大话人生  阅读(174)  评论(0编辑  收藏  举报
编辑推荐:
· .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语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示