原文网址:Vue--Router--router-link与this.$router.push--使用/区别_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍Vue Router的声明式路由跳转(router-link)与编程式路由跳转(this.$router.push)。
两者的对比
项 | router-link | this.$router.push |
优点 | 简单快捷 | 灵活性高(自定义的程度高) |
缺点 | 灵活性低(自定义的程度低) | 写起来较麻烦 |
两者只是写法不一样,但它们传参的方式一模一样。
示例
路由设置
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>
测试
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>
测试