Vue--Router--router-link与this.$router.push--使用/区别

今天药忘吃喽~ 2023-09-29 16:55 41阅读 0赞

原文网址：[Vue--Router--router-link与this.$router.push--使用/区别\_IT利刃出鞘的博客-CSDN博客][Vue--Router--router-link_this._router.push--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍Vue Router的声明式路由跳转（router-link）与编程式路由跳转（this.$router.push）。

**两者的对比**

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>项</strong></td> 
   <td><strong>router-link</strong></td> 
   <td><strong>this.$router.push</strong></td> 
  </tr> 
  <tr> 
   <td><strong>优点</strong></td> 
   <td>简单快捷</td> 
   <td>灵活性高（自定义的程度高）</td> 
  </tr> 
  <tr> 
   <td><strong>缺点</strong></td> 
   <td>灵活性低（自定义的程度低）</td> 
   <td>写起来较麻烦</td> 
  </tr> 
 </tbody> 
</table>

两者只是写法不一样，但它们传参的方式一模一样。

## 示例 ##

### **路由设置** ###

router/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import UserList from '../views/user/UserList'
    import UserHome from '../views/user/UserHome'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        redirect: '/userList'
      },
      {
        path: '/userList',
        name: 'UserList',
        component: UserList
      },
      {
        path: '/user',
        name: 'UserHome',
        component: UserHome
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

### 用户主页页面 ###

UserHome.vue

<template>
      <div>
        <div>用户名：{
       { userName }}</div>
        <div>用户昵称：{
       { nickName }}</div>
        <div>博客数量：{
       { blogCount }}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserHome',
      data () {
        return {
          userName: '',
          nickName: '',
          blogCount: 0
        }
      },
      methods: {
        getProfile (userName) {
          const _this = this
    
          // 省略：发请求，通过userName获得用户信息
    
          const user = {
            userName: userName,
            nickName: '这是昵称',
            blogCount: 121
          }
          _this.userName = user.userName
          _this.nickName = user.nickName
          _this.blogCount = user.blogCount
        }
      },
      created () {
        const userName = this.$route.params.userName
        this.getProfile(userName)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

### 用户列表页面 ###

UserHome.vue

#### router-link写法 ####

<template>
      <div class="user-list-container">
        <div class="user-item-box"
             :key="user.userName"
             v-for="user of users">
          <router-link :to="{name: 'UserHome', params: {userName: user.userName}}">
            {
       { user.userName }}
          </router-link>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserList',
      data () {
        return {
          users: {},
          current: 1,
          total: 0,
          size: 10
        }
      },
      methods: {
        page (current, size) {
          const _this = this
    
          const users = [
            {
              id: 1,
              userName: 'Tony',
              nickName: '刀刃'
            }, {
              id: 2,
              userName: 'Pepper',
              nickName: '天蓝'
            }
          ]
          _this.users = users
          _this.current = current
          _this.total = 122
          _this.size = users.length
        }
      },
      created () {
        this.page(1, 10)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

测试

![b4ea1dfc0c744659b7cea4d493723558.gif][]

#### this.$router.push写法 ####

<template>
      <div class="user-list-container">
        <div class="user-item-box"
             :key="user.userName"
             v-for="user of users"
             @click="toUserHome(user.userName)">
          <div>{
       {user.userName}}</div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'UserList',
      data () {
        return {
          users: {},
          current: 1,
          total: 0,
          size: 10
        }
      },
      methods: {
        page (current, size) {
          const _this = this
    
          const users = [
            {
              id: 1,
              userName: 'Tony',
              nickName: '刀刃'
            }, {
              id: 2,
              userName: 'Pepper',
              nickName: '天蓝'
            }
          ]
          _this.users = users
          _this.current = current
          _this.total = 122
          _this.size = users.length
        },
        toUserHome (userName) {
          this.$router.push({ name: 'UserHome', params: { userName: userName } })
        }
      },
      created () {
        this.page(1, 10)
      }
    }
    </script>
    
    <style scoped>
    
    </style>

测试

![931790965f8a4f94bd24bf90711092af.gif][]

[Vue--Router--router-link_this._router.push--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126215335
[b4ea1dfc0c744659b7cea4d493723558.gif]: https://img-blog.csdnimg.cn/b4ea1dfc0c744659b7cea4d493723558.gif
[931790965f8a4f94bd24bf90711092af.gif]: https://img-blog.csdnimg.cn/931790965f8a4f94bd24bf90711092af.gif