Vue2路由router的安裝和使用完整實例

更新時間：2025年05月21日 09:24:01 作者：娃哈哈哈哈呀

這篇文章主要介紹了Vue2路由router的安裝和使用完整實例,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、如何安裝路由

第一步：在終端輸入命令npm i vue-router@3

第二步：出現(xiàn)added 1 package in 2m表示安裝成功

二、vue-router配置環(huán)境

第一步：在src路徑中新建一個router文件夾，放置index.js

第二步：在index.js文件中導(dǎo)入路由：import VueRouter from 'vue-router'

第三步：在index.js文件中使用路由：Vue.use(VueRouter)

第四步：在main.js文件中引入路由文件：

注意：router文件夾中的index.js文件在導(dǎo)入時，可以省略不寫index：import router from'./router'

三、如何使用路由

靜態(tài)路由

1、聲明式

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

2、編程式

// 在組件中
this.$router.push('/about')

動態(tài)路由

編程式路由導(dǎo)航來傳遞參數(shù)

在路由配置中定義動態(tài)路由參數(shù)：

    routes: [
    {
		path: '/uploadFile/:id',
		name: 'uploadFile',
		component: uploadFile
	}
]

在組件中使用 $router.push 方法進(jìn)行編程式導(dǎo)航并傳遞參數(shù)：

 openDialog(row){
            this.$router.push({ name: 'uploadFile', params: { id: row.id } });
        },

這里的 id 就是你想要傳遞的參數(shù)。

在接收參數(shù)的組件中通過 $route.params 獲取傳遞的參數(shù)：

  mounted() {
        const id = this.$route.params.id;
    },

完整案例

說明：通過另一個goodsList頁面中的表格，點(diǎn)擊任何一條即可跳轉(zhuǎn)到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="狀態(tài)">
            </el-table-column>
            <el-table-column prop="name" label="操作" align="center">
                <template slot-scope="scope">
                    <!-- (scope.row.userId)用于獲取當(dāng)前行數(shù)據(jù)對象中的用戶ID（或其他字段） -->
                    <el-button size="mini" type="text" @click="openDialog(scope.row)">編輯                
                   </el-button>
                </template>
            </el-table-column>
        </el-table>

在路由配置中定義動態(tài)路由參數(shù)：

    {
		path: '/uploadFile/:id',
		name: 'uploadFile',
		component: uploadFile
	}, {
		path: '/goodsList',
		component: goodsList
	}

在goodsList組件中使用 $router.push 方法進(jìn)行編程式導(dǎo)航并傳遞參數(shù)：

 methods: {
        openDialog(row) {
            this.$router.push({ name: 'uploadFile', params: { id: row.id } });
        },
    }

這里的 id 就是你想要傳遞的參數(shù)。

在接收參數(shù)的uploadFile組件中通過 $route.params 獲取傳遞的參數(shù)：

 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
            })
        },
}

到此這篇關(guān)于Vue2路由router的安裝和使用完整實例的文章就介紹到這了,更多相關(guān)Vue2路由router內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: