vue3.0中路由跳转,v-model的使用

前言：

      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>