vue中vue-router安装与配置方法步骤详解
2023-09-27 14:27:34 时间
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 安装3.0及以上最新版本的脚手架 命令
- vue - 安装脚手架
- vue - 官方 - 上手
- 【Vue】Vuex的安装和实现【全局参数传递】实例(图文+完整源代码)
- 【Vue】Vue的安装环境搭建以及vue2.0-devtools和vue3.0-devtools6.0调试插件安装
- Vue - Nuxt.js 安装引入 WangEditor V5 富文本编辑器最新版本,超详细使用教程(Nuxt.js 项目使用官方提供的示例,页面报错,刷新就会报错navigator is解决方案)
- Vue.js / Nuxt.js / uni-app - 移动端 H5 网页,在电脑 PC 上打开时居中显示(手机网页在电脑上打开后,简单粗暴防止 “界面样式“ 拉伸变形的解决方案)适用所有web项目
- vue基础教程安装创建项目
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
- 如何创建并发布一个 vue 组件
- Vue-cli2.0报错[WDS] Disconnected的解决方式
- vue的图片裁剪vue-cropper
- vue报错如log,如果其他项目运行没问题,很有可能是代码错误 加externals报错
- Vue之Action
- vue-router路由安装与使用
- Vue Router安装与基本使用
- 【vue init】三.项目引入axios、申明全局变量、设置跨域
- Vue登录token处理
- vue的组件(先学习其他的ES6知识,之后再看这个) (未完)
- 深入Vue - 源码目录及构建过程分析
- Vue-插槽的使用
- Vue学习第22天——Vuex安装使用详解及案例练习(彻底搞懂vuex)
- vue @click.native
- Vue项目安装core-js报错解决方案
- Vue使用ElementUI对table的指定列进行合算
- vue-cli3安装遇到的问题,卸载不掉旧版本,导致更新不了
- 全局安装 Vue cli3 和 继续使用 Vue-cli2.x