目录

 

一、如何安装路由

第一步:在终端输入命令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文件中引入路由文件:

三、如何使用路由


一、如何安装路由

  • 第一步:在终端输入命令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
            })
        },
}

 

 

 

Logo

前往低代码交流专区

更多推荐