Vue2路由router的安装和使用完整实例
上篇文章给大家介绍了关于Vue3路由push跳转问题(解决Vue2this.$router.push失效） 喜欢的朋友点击查看，今天继续给大家介绍关于Vue2路由router的相关知识。正文如下：
一、如何安装路由
第一步：在终端输入命令npm i vue-router@3
第二步：出现added 1 package in 2m表示安装成功
二、vue-router配置环境
第一步：在src路径中新建一个router文件夹，放置index.js
第二步：在index.js文件中导入路由：import VueRouter from 'vue-router'
第三步：在index.js文件中使用路由：Vue.use(VueRouter)
第四步：在main.js文件中引入路由文件：
注意：router文件夹中的index.js文件在导入时，可以省略不写index：import router from'./router'
三、如何使用路由
静态路由
1、声明式
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>2、编程式
// 在组件中
this.$router.push('/about')动态路由
编程式路由导航来传递参数
在路由配置中定义动态路由参数：
routes: [
{
path: '/uploadFile/:id',
name: 'uploadFile',
component: uploadFile
}
]在组件中使用 $router.push 方法进行编程式导航并传递参数：
openDialog(row){
this.$router.push({ name: 'uploadFile', params: { id: row.id } });
},这里的 id 就是你想要传递的参数。
在接收参数的组件中通过 $route.params 获取传递的参数：
mounted() {
const id = this.$route.params.id;
},完整案例
说明：通过另一个goodsList页面中的表格，点击任何一条即可跳转到uploadFile页面
在 goodsList模板中显示表格
<el-table :data="goodsData" border style="width: 100%">
<el-table-column prop="id" label="id" width="180">
</el-table-column>
<el-table-column prop="name" label="商品名称" width="180">
</el-table-column>
<el-table-column prop="price" label="商品价格" width="180">
</el-table-column>
<el-table-column prop="imageUrl" label="商品图片" width="180">
</el-table-column>
<el-table-column prop="status" label="状态">
</el-table-column>
<el-table-column prop="name" label="操作" align="center">
<template slot-scope="scope">
<!-- (scope.row.userId)用于获取当前行数据对象中的用户ID（或其他字段） -->
<el-button size="mini" type="text" @click="openDialog(scope.row)">编辑
</el-button>
</template>
</el-table-column>
</el-table>在路由配置中定义动态路由参数：
{
path: '/uploadFile/:id',
name: 'uploadFile',
component: uploadFile
}, {
path: '/goodsList',
component: goodsList
}在goodsList组件中使用 $router.push 方法进行编程式导航并传递参数：
methods: {
openDialog(row) {
this.$router.push({ name: 'uploadFile', params: { id: row.id } });
},
} 这里的 id 就是你想要传递的参数。
在接收参数的uploadFile组件中通过 $route.params 获取传递的参数：
mounted() {
const id = this.$route.params.id;
this.selectById(id);
},
methods: {
selectById(id){
this.$axios({
method:'post',
url:'http://localhost:8080/api/upload/selectGoods',
data:{
id:id
}
}).then((res)=>{
console.log("4444"+JSON.stringify(res ));
this.fileList.push( {name: res.data.data.list[0].name, url: res.data.data.list[0].imageUrl})
this.name=res.data.data.list[0].name
this.price=res.data.data.list[0].price
})
},
}到此这篇关于Vue2路由router的安装和使用完整实例的文章就介绍到这了,更多相关Vue2路由router内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue3 中的数据侦测的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
v-model是Vue中的一个重要语法糖,主要用于实现数据的双向绑定,它通过结合value属性和input事件,简化了代码并提高了开发效率,文中通过代码介绍的非常详解,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue3+bpmn.js基本使用的相关资料,通过实例讲解了如何使用BPMN.js库创建一个流程图编辑器,从创建容器、引入左侧工具栏和右侧属性栏到汉化、导出XML和SVG以及导入XML文件的功能实现,每个步骤都附有效果图,需要的朋友可以参考下2025-05-05
Vue Element 分组+多选+可搜索Select选择器实现示例
这篇文章主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue使用gitshot生成gif问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue 音乐App QQ音乐搜索列表最新接口跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
vue使用$store.commit() undefined报错的解决
这篇文章主要介绍了vue使用$store.commit() undefined报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了VUE引入腾讯地图并实现轨迹动画,引入步骤大概是在 html 中通过引入 script 标签加载API服务，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-09-09
最新评论