【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——③项目开发中引入vue-router,并进行配置
1、引入vue - router :搜索vue-router,打开vue-router官方文档
2、由于本项目基于vue2开发,因此将官网切换到v3.x版本,在导航-安装 目录下选择npm安装方式
安装命令如下
npm install vue-router
由于上述命令会安装最新版本,而不是适配的v3.x版本,因此使用@方式指定版本号
npm install vue-router@版本号
①通过百度npm,在npm中可以查找到v3.x(vue-router 3)的最近版本
②在npm官网中键入 vue-router 进行搜索,选中第一项
③点击versions,即可查找到对应版本号
由上图发现v3.x最近版本号为3.6.5,打开vscode终端进行安装
安装命令如下,输入后键入回车,进行安装
npm install vue-router@3.6.5
下载完成
打开 package.json 进行验证
3、对vue-router进行配置:在src目录下新建router文件夹,在router文件夹下新建index.js文件
打开vue-router 官方文档 ,发现如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
相关代码如下:
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)
将上述代码配置到在router文件夹下的index.js文件
打开官方文件,在起步-javascript中有详细说明
相关代码如下:
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }
]// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({router
}).$mount('#app')// 现在,应用已经启动了!
4、按照javascript的说明,首先在src文件夹下新建views文件夹,注册.vue组件
①组件注册完成后在router文件夹下的index.js 进行引用
代码如下:
//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'
②将路由与组件进行映射
代码如下:
//将路由与组件进行映射
const routes = [{ path: '/home', component: Home},{ path: '/user', component: User}]
③创建router 实例
代码如下:
//创建 router 实例
const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})
④将router实例对外暴露
代码如下:
//将当前router实例对外进行暴露
export default router
router文件下的index.js完整代码如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'//将路由与组件进行映射
const routes = [{ path: '/home', component: Home },{ path: '/user', component: User }
]//创建 router 实例
const router = new VueRouter({routes // (缩写) 相当于 routes: routes})//将当前router实例对外进行暴露
export default router
5、创建和挂载根实例,打开src文件下的main.js ,引入router
在当前实例上进行挂载
main.js文件的完整代码如下:
import Vue from 'vue'
import App from './App.vue'//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//引入router
import router from './router'//对element ui进行全局注册
Vue.use(ElementUI);Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')
6、匹配路由出口,将组件进行在App.vue文件中渲染
代码如下:
①匹配路由出口
<!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
②App.vue完整代码:
<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/> --><!-- <el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row> --><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div>
</template><script>
//import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',// components: {// HelloWorld// }
}
</script><style></style>
7、启动项目进行验证
发现项目报错
解决方式:打开vue.config.js,添加lintOnSave:false;
保存,重新运行【有时运行失败先关闭vscode,重新在终端输入npm run serve指令】
初始进入页面如下:
通过更改url的地址(添加user或home),实现路由切换
至此,vue-router代码配置完成
【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——③项目开发中引入vue-router,并进行配置相关推荐
- 基于springboot和mysql的模拟驾校考试系统源码
开发工具:idea或eclipse 数据库:mysql 数据库连接工具:navcat # 基于springboot和MySQL的模拟驾校考试系统 ## 项目主要功能介绍: 项目采用springboot ...
- 基础环境搭建——基于Spark平台的协同过滤实时电影推荐系统项目系列博客(五)
系列文章目录 初识推荐系统--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(一) 利用用户行为数据--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二) 项目主要效果展示--基 ...
- 网站框架搭建——基于Django框架的天天生鲜电商网站项目系列博客(二)
系列文章目录 需求分析--基于Django框架的天天生鲜电商网站项目系列博客(一) 网站框架搭建--基于Django框架的天天生鲜电商网站项目系列博客(二) 用户注册模块--基于Django框架的天天 ...
- 微信小程序在线考试系统+后台管理系统|前后分离VUE
<微信小程序在线考试系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
- 【转】Vue.js入门教程(二)在页面中引入vue的方式
第二章:安装和基础效果展示 页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
- [精品毕设]微信小程序在线考试系统+后台管理|前后分离VUE
<微信小程序在线考试系统+后台管理系统|前后分离VUE>该项目含有源码.文档等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
- 精品微信小程序在线考试系统+后台管理系统|前后分离VUE
<微信小程序在线考试系统+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...
- 自动化运维-----项目实战: 基于Ansible的云平台自动化运维系统
文章目录 项目实战: 基于Ansible的云平台自动化运维系统 一.项目介绍 1.项目介绍 2.项目背景 二.项目环境搭建 1.项目目录的配置 2.远程服务器虚拟环境的配置 3.MySQL数据库配置 ...
- 一款开源的Java在线考试系统项目(附源码)
嗨喽!Java后端编程的各位小伙伴们,由于公众号做了乱序推送改版,为了保证公众号的推文能够第一时间及时送达到大家手上,大家记得将公众号 加星标置顶 ,公众号每天会送上Java技术干货推文 ! 上篇推文 ...
最新文章
- python爬取贴吧所有帖子-通过python爬取贴吧数据并保存为word
- 云计算背后的秘密(6)-NoSQL数据库的综述
- 【转】安全测试自学路线图
- JAVA中for循环写杨辉三角,java使用for循环输出杨辉三角
- mybatis的简单查询用语句吗_面试官:Mybatis中的TypeHandler你用过吗?
- 编转码、CDN和AI是如何撑起短视频数百亿市场规模的
- spring 启动完成后事件监听器处理
- mysql 系统工程师_数据库系统工程师难考吗?
- 识别中文_关于开展中文语音识别和语音合成基础服务可信评估的通知
- 使用ADC精确测量电阻阻值
- 模拟算法考试训练题和答案1
- AI开发之——Leonardo—Finetuned Models及利用模型制图(5)
- Python OpenCv 车牌检测识别(边缘检测、HSV色彩空间判断)
- 2-文件+结构体实现实用系统(拓展)
- 《东周列国志》第六十二回 诸侯同心围齐国 晋臣合计逐栾盈
- Python 3 内置函数 tuple( )
- 《帝国时代IV》(Age of Empires IV)CODEX版切换简体中文界面和语音的方法 附中文语言和语音下载
- APP超级签名分发系统 企业签名免签封装微信多开自助分发多合一系统
- OBS编译vs2019
- Visual Geometry Group 资源(vgg)
热门文章
- 支付宝RSA密钥生成器1024位
- 测试电流大小的软件,对比6种电流测量方法的优缺点
- VTK编译中出现 no override found for vtkpolydatamapper 解决方法
- 电视信号冷知识——电视测试图像
- React UI 组件库 Chakra UI - 02 颜色模式
- vasp 模拟退火_物理学报
- Unity无限地形生成(基于柏林噪声的简单生成)
- vue实现文字滚动效果
- wh计算公式_1wh等于多少ah
- 由于文件不可访问,或者内存或磁盘空间不足,所以无法打开数据库 ‘msdb‘。无法打开数据库msdb 恢复操作已将该数据库标记为SUSPECT