欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-17 21:27:30
...

前言:

      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>

 

相关标签: vue3.0 vue3.0