Vue项目代码改进(四)—— 在使用ElementUI时点击同一个路由,页面报错

在这里插入图片描述

这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错。
错误代码如下:

element-ui.common.js?ccbf:3339 NavigationDuplicated {_
name: "NavigationDuplicated", 
name: "NavigationDuplicated", 
message: "Navigating to current location ("/users") is not allowed", 
stack: "Error↵    at new NavigationDuplicated (webpack-int…e_modules/element-ui/lib/mixins/emitter.js:29:22)"}

问题描述出来就好办了,查询后修改router/index.js代码,增加:

const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

搞掂 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面我来为您介绍如何在 Vue 项目使用 ElementUI 创建组件并组合成一个页面。 首先,我们需要在项目中安装 ElementUI。在命令行中输入以下命令: ``` npm install element-ui --save ``` 安装完成后,在 main.js 文件中引入 ElementUI 并注册组件: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接下来,我们可以创建两个组件:一个是表格组件,另一个是表单组件。表格组件用于展示数据,而表单组件用于提交数据。 表格组件: ```vue <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, ], } }, } </script> ``` 表单组件: ```vue <template> <div> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="form.age"></el-input> </el-form-item> <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="男">男</el-radio> <el-radio label="女">女</el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { name: '', age: '', gender: '', }, } }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('提交成功') } else { console.log('提交失败') return false } }) }, }, } </script> ``` 最后,在 App.vue 文件中将这两个组件组合在一起: ```vue <template> <div id="app"> <Table /> <Form /> </div> </template> <script> import Table from './components/Table.vue' import Form from './components/Form.vue' export default { name: 'App', components: { Table, Form, }, } </script> ``` 这样,我们就完成了在 Vue 项目使用 ElementUI 创建组件并组合成一个页面的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值