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

元の URL: Vue--Router--router-link と this.$router.push--use/difference - プログラマー募集

序章

例証する

        この記事では、Vue Router の宣言型ルーティング ジャンプ (router-link) とプログラムによるルーティング ジャンプ (this.$router.push) を紹介します。

両者の比較

アイテム	ルーターリンク	this.$router.push
アドバンテージ	シンプルで高速	高い柔軟性（高度なカスタマイズ）
欠点	柔軟性が低い (カスタマイズの程度が低い)	書くのがもっと面倒

この 2 つは書き方が異なるだけですが、パラメータを渡す方法はまったく同じです。

例

ルーティング設定

ルーター/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

ルーターリンクの書き方

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

テスト

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>

テスト