前言:
vue3.0中实现路由的跳转,3.0的用法和2.0不一样,2.0中直接this.$router.push就可以使用了,3.0中比如引入配置,
vue3.0中的v-model页面绑定数据,页面上使用方法跟以前一样,还是{
{内容}},但是方法和字段定义却不是在,data和methods里面了,是放在setup这个阶段,通过定义字段和方法,然后发送出来
路由跳转相关:
<el-button @click="changeLink">切换到page1</el-button>
import {
useRouter
} from 'vue-router'
function changeLink() {
router.push('/page1')
}
全部实现源码:
<template>
<div>
<h1>auth:{
{ state.name }}</h1>
<el-button @click="changeLink">切换到page1</el-button>
</div>
</template>
<script>
import {
reactive
} from 'vue'
import {
useRouter
} from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
let state = reactive({
name: '浩星'
})
function changeLink() {
router.push('/page1')
}
return {
state,
changeLink
}
}
}
</script>