目录
第二步:出现added 1 package in 2m表示安装成功
第一步:在src路径中新建一个router文件夹,放置index.js编辑
第二步:在index.js文件中导入路由:import VueRouter from 'vue-router'
第三步:在index.js文件中使用路由:Vue.use(VueRouter)
一、如何安装路由
-
第一步:在终端输入命令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
})
},
}