Vue router在Visual Studio Code中的安装与使用

最新推荐文章于 2024-04-29 22:22:14 发布
最新推荐文章于 2024-04-29 22:22:14 发布
阅读量3.5k 收藏 12
点赞数 7
分类专栏： vue 文章标签： vue 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44629323/article/details/107568954
版权
本文介绍了如何在Visual Studio Code中安装和使用Vue Router。首先，通过cnpm安装Vue Router，然后在项目中创建router.js配置路由，并在src目录下建立views文件夹和相关组件。接着，在router.js中导入并设置路由，同时在App.vue和main.js中进行相应配置，最终实现页面路由的正确展示。
摘要由CSDN通过智能技术生成

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

1.安装Vue router

1.先新建一个vue，把他拉进Visual Studio Code
在Visual Studio Code的终端输入：

npm install vue-router或cnpm install vue-router或yarn add vue-router

在这里我用的cnpm安装的
在这里插入图片描述
安装成功之后在上面的node_modules中找到：vue-router文件在这里插入图片描述

2.使用

1.在项目的src里面新建文件r

最低0.47元/天 解锁文章
小小码农呀
关注
  • 7
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vscode-VueHelper, vscode插件，vue，vue-router和vuex的代码提示.zip
09-17
vscode-VueHelper, vscode插件，vue，vue-router和vuex的代码提示
降低vue-router版本的两种方法
算法与编程之美
03-29 8791
一、引言vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。当我们在官网中安装路由或者安装时不注明版本，即默认安装router4.X，而我们创建的是vue2，只能结合 vue-router 3.x 版本才能使用。所以需要降低vue-router的版本。二、方法vue-router 4.x 只能结合 vue3 进行使用,v...
Vue Router的安装与基本使用方法
qq_40930841的博客
04-29 1112
一、了解为何使用路由•具体使用示例：网易云音乐•单页面应用(SPA)：所有功能在一个html页面上实现•前端路由作用：实现业务场景切换（一个路由路径对应一个组件）•优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高。•缺点：首次加载（要加载所有的静态资源）会比较慢一点。1.vue-router模块yarn。
VSCode自定义代码片段11——vue路由的配置
Java_53的博客
04-19 1638
vue的路由配置 // 1,配置路由/映射表 import VueRouter from "vue-router" import Vue from "vue" // 5,传入所有路由对应.vue组件 // 【【【 主页页面 import Home from "../components/Home.vue" import homeNews_1 from "../components/homeNews_1.vue" import homeNews_2 from "../components/homeNe
vue-router的使用
qq_44621891的博客
12-14 126
vueVue关键内容1.2.3.4.安装命令使用Vue-Router Vue关键内容 1. 创建一个模板 <template> <div id="app"> <div style="color:red">ysk</div> </div> </template> 2. 将此模板导出,别处可引用 export default { name: 'App', } 3. 导入组件 import Demo fro
基于vscode实现vue3项目创建启动+安装配置路由vue-router实现单页面组件切换
weixin_40996100的博客
04-08 5914
基于vscode实现vue3项目创建启动并安装配置路由vue-router实现单页面组件切换
vscode使用npm安装element-UI并添加router路由
qq_40452641的博客
01-09 1052
可以看到多了一行elementui就代表安装成功了。要启动welcome.vue还需要配置他的启动路径。要启动还要添加他的路由。这一步顺便装个axios方便以后写请求用。安装完成后需要启用elementUI。这里就以welcome.vue为例。安装完成后在目录结构打开下图文件。在main.js中配置一下启动项。最后配置welcome的路由路径。在他给的路径后面加上路由路径。vscode控制台输入指令。这里在官方文档根据提示安装。在main.js中添加路由。安装完成后加一个前端拦截器。下面是项目常用的结构。
Vue3项目示例代码,项目代码使用pinia和vue-router等插件
最新发布
06-27
11. **.vscode**：这个目录包含了Visual Studio Code的配置文件，可能包括工作区设置、调试配置等，有助于保持开发环境的一致性。 12. **src**：源代码目录，通常包含项目的组件、样式、路由、store等主要代码结构...
vue-router.7z
05-06
8. `.vscode`：这是Visual Studio Code的配置目录，可能包含项目特定的代码编辑器设置、调试配置等。 9. `src`：这是源代码目录，通常包含Vue组件、样式、脚本、配置等项目的核心内容。Vue Router的配置和使用通常...
vue开发的需要软件，包含vscode,nodejs
01-19
在进行Vue开发时，有几个关键的工具是必不可少的，其中包括Visual Studio Code (VSCode) 和 Node.js。让我们深入了解一下这两个软件及其在Vue开发中的重要性。 首先，Visual Studio Code（VSCode）是一款由微软开发...
Vs Code Vue实现增删改查
01-07
本教程将重点讲解如何使用Visual Studio Code（简称Vs Code）这个强大的代码编辑器来实现Vue项目中的增删改查功能。首先，我们来看看Vue的基本概念。 Vue.js是尤雨溪开发的一个渐进式JavaScript框架，它具有轻量级...
使用vue3.0 创建项目
12-16
Visual Studio Code（VSCode）是一个流行的代码编辑器，支持丰富的插件和调试功能，是 Vue 开发的理想选择。安装 VSCode 后，可以安装 Vue.js 相关的插件，如 Vetur，它提供了代码高亮、智能提示、格式化和错误检查...
Vue3开发教程（ 四、Vue-router基础篇）
weixin_39873136的博客
05-30 4523
介绍vuer-router中的<router-link>、<router-view>、嵌套路由、router-api操作等相关知识，并集将内容集成到demo项目中。
VSCode常用命令---记录自己的常用命令
Una_lover的博客
10-19 4284
收录nvm 、npm、vue、git等常用命令
vue-cli脚手架从零开始
xiaolingshi_的博客
11-26 108
vuecli使用前提:node和webpack vue init webpack vuecli2test 即可生成文件夹 vue程序运行过程 runtimeonly runtimeonly和runtimecompiler的对比 创建cli3的项目 vue create testvuecli3 main.js 这两种写法都是可以的，一样的 vuecli3的目录结构 vuecli3配置文件的查看和修改 vue ui 查看图形界面 git commit -m ’ 添加一个配置文
vscode搭建vue环境
fortune_mz的博客
04-03 1万+
1.在nodejs安装目录下新建node_cache（nodejs缓存）、node_global（全局包存放）两个文件夹，如下图所示。根据个人电脑型号显示进行下载，安装时注意指定安装路径，然后一直选择next即可。可关闭vscode，选择以管理员身份再次打开，或者检查环境变量是否配置正确。，用于统一JavaScript代码风格的工具。运行vue文件时报错。
02.Vite 安装 Vue-Router
qq_34820433的博客
04-26 1483
createApp(App).use(router)... 5. 第二步：创建路由配置文件 router/index.js，可复制《Vue3.x 工具篇》的配置；6. 第三步：创建视图组件 views/*.vue，比如：Home.vue 和 About.vue；7. 第四步：在 App.vue 中移植主页信息到 Home.vue，并设置 link；1. 进入项目目录，比如：vite-01，使用如下命令安装路由；4. 第一步：先注册路由，在 main.js 下注册路由；1.Vue-Router 安装。
基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router
水w的博客
03-02 7083
基于vscode开发vue3项目的详细步骤教程 3 前端路由vue-router
【vue】 vue-router安装和配置方法
热门推荐
m0_56349322的博客
04-04 2万+
vue-router 是 vue.js 官方的路由插件，里面组件和 URL 的映射关系由 vue-route 帮我们管理。 在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换。 第一步： 1.正常初始化项目的时候，会有个 vue-router 供我们选择。 2.如果你不知道插件俺没安装，看下图中是否有此信息即可，如有即存在。 3.如果不存在则通过代码安装插件即可。 代码：npm install vue-router --save 这里要备注一下有的人安装的时候会报错，
用Visual Studio Code建立一vue程序，用于登录验证
06-02
要用 Visual Studio Code 建立一个 Vue 程序并实现登录验证，需要进行以下步骤： 1. 安装 Node.js 和 Vue CLI 在安装 Vue CLI 前，需要先安装 Node.js。安装完成后，打开终端或命令行窗口，输入以下命令安装 Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建一个新的 Vue 项目 在终端中，进入要创建项目的目录下，输入以下命令创建一个新的 Vue 项目： ``` vue create my-project ``` 3. 安装 Vue Router 和 Vuex 进入项目目录，输入以下命令安装 Vue Router 和 Vuex： ``` cd my-project npm install vue-router vuex --save ``` 4. 创建登录页面和验证逻辑 在 src 目录下创建一个 views 目录和一个 Login.vue 文件，编写登录页面的 HTML 和 JavaScript 代码，实现登录验证逻辑。可以使用 Vuex 存储登录状态。 5. 创建路由 在 src 目录下创建一个 router 目录和一个 index.js 文件，编写路由配置代码，将登录页面映射到根路径。 6. 运行程序 在终端中输入以下命令运行程序： ``` npm run serve ``` 打开浏览器，访问 http://localhost:8080 即可看到登录页面。 以上就是用 Visual Studio Code 建立一个 Vue 程序并实现登录验证的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值