vue中vue-router安装与配置方法步骤详解
更新时间：2022年12月12日 09:19:02 作者：studyer网
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,下面这篇文章主要给大家介绍了关于vue中vue-router安装与配置方法的相关资料,需要的朋友可以参考下
前言
vue-router 是 vue.js 官方的路由插件，里面组件和 URL 的映射关系由 vue-route 帮我们管理。
在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换。
第一步：
1.正常初始化项目的时候，会有个 vue-router 供我们选择。
2.如果你不知道插件俺没安装，看下图中是否有此信息即可，如有即存在。
3.如果不存在则通过代码安装插件即可。
代码：npm install vue-router --save
这里要备注一下有的人安装的时候会报错，大致意思是说要选择vue-router版本，报错信息如下
从新敲入代码：npm install vue-router@3.5.2 --save 建议3.5.2这个版本
出现这样表示安装成功啦。
第二步：
然后再index.js 中内容配置如下：
第三步：
再目录components下面创建要用的组件
在路由文件中引入刚才创建的组件，以及配置组件和路径的映射关系
现在点击登录下方就会跳出登录页面的内容，点击注册页面就会跳出注册页面。
一般在进入页面的时候都会有个默认的首页信息，比如我想一刷新页面或者一打开页面在下面的内容就显示的是注册页面的内容，那么这个时候我们就要用到路由的默认路径。
总结
到此这篇关于vue中vue-router安装与配置方法步骤的文章就介绍到这了,更多相关vue vue-router安装与配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3之状态管理器(Pinia)详解及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了Vue 项目迁移 React 路由部分经验分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
我在做一个调用虚拟机录屏的一个操作,需要在浏览器页面上,点击按钮后,关闭当前页面里的某一个页面,并且打开浏览器新页面是虚拟机的页面,本文给大家介绍vue 跳转到其他页面并关闭当前页面的实现代码,感兴趣的朋友一起看看吧2023-09-09
Vue 3 + Element Plus 封装单列控制编辑的可编辑表格
在Web应用开发中实现表格数据编辑功能至关重要,本文将详细介绍如何使用Vue3和ElementPlus库来构建一个支持单列编辑的表格组件,本教程详细阐述了组件创建过程和数据绑定机制,帮助你快速掌握Vue3中表格编辑功能的实现,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要介绍了vue使用jsencrypt实现rsa前端加密,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
下面小编就为大家带来一篇浅谈vue-router2路由参数注意的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
上传图片不管是后台还是前端小程序，上传图片都是一个比不可少的功能有时候需要好几个页面都要上传图片，每个页面都写一个非常不方便，本文就给大家介绍vue如何封装一个上传多张图片的组件,需要的朋友可以参考下2023-07-07
在Vue2中,可以使用WebSocket实时通信,本文主要介绍了vue2封装webSocket的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版，因为是第一次使用vue，而且一开始使用的时候2.0出来一个月不到，很多坑都是自己去踩的，现在项目要上线了，所以记录一些过程2017-01-01
这篇文章主要介绍了vue3使用vue-count-to组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最新评论