Vue--Router--router-link y this.$router.push--use/difference

URL original: Vue--Router--router-link and this.$router.push--use/difference - Programador buscado

Introducción

ilustrar

        Este artículo presenta el salto de enrutamiento declarativo de Vue Router (enlace de enrutador) y el salto de enrutamiento programático (this.$router.push).

comparación de los dos

artículo	enrutador-enlace	esto.$router.push
ventaja	Sencillo y rápido	Alta flexibilidad (alto grado de personalización)
defecto	Baja flexibilidad (bajo grado de personalización)	más problemático para escribir

Los dos están escritos de manera diferente, pero pasan parámetros exactamente de la misma manera.

Ejemplo

configuración de enrutamiento

enrutador/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

Página de inicio del usuario

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>

Página de lista de usuarios

UserHome.vue

Cómo escribir un enlace de enrutador

<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>

prueba

escritura 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>

prueba