Route jump in vue3.0, use of v-model

Foreword:

      The route jump is implemented in vue3.0. The usage of 3.0 is different from 2.0. In 2.0, this.$router.push can be used directly. In 3.0, for example, the introduction of configuration,

      The v-model page in vue3.0 binds data. The usage method on the page is the same as before. It is still { {content}}, but the method and field definitions are not in the data and methods. They are placed in the setup stage. By defining fields and methods, and then sending them

Route jump related:

<el-button @click="changeLink">切换到page1</el-button>

import {
  useRouter
} from 'vue-router'

 function changeLink() {
      router.push('/page1')
    }

All implementation source code :

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