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安装与配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue radio单选框,获取当前项(每一项)的value值操作
这篇文章主要介绍了vue radio单选框,获取当前项(每一项)的value值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性,本文为大家介绍了vue3利用组合式api创建单文件组件的方法,感兴趣的可以了解下2023-08-08
关于vue-lunar-full-calendar的使用说明
这篇文章主要介绍了关于vue-lunar-full-calendar的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue3第二次传递数据方法无法获取到最新的值,本文通过实例图文相结合给大家详细讲解,感兴趣的朋友一起看看吧2025-04-04
vue-element-admin中node-sass换成dart-sass,安装依赖报code 128多种问题的解决
这篇文章主要介绍了vue-element-admin中node-sass换成dart-sass,安装依赖报code 128多种问题的解决方法,本文给大家分享问题原因分析及解决方法，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue日志之如何select选中默认值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题,下面这篇文章主要给大家介绍了关于Vue页面首次载入优化的相关资料,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了vue3中的父子组件通讯详情，文章以传统的props展开主题相关资料内容，具有一定参考价值，需要的小伙伴可以参考一下2022-06-06
文章介绍了在Vue中操作select元素并实时获取选中的option值的方法,通过使用`@change`事件并传递参数,可以实现动态获取选中的值2025-01-01
虽然老早就看过很多echarts的例子， 但自己接触的项目中一直都没有真正用到过，直到最近才开始真正使用，下面这篇文章主要给大家介绍了关于在vue中添加Echarts图表的基本使用教程，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-11-11
最新评论