检查了代码看不出什么问题 el-button @click="goHome"不能点击返回

Question

按照步骤敲了代码，但是点击按钮无法返回首页

代码如下
index.js:

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from './../components/Home.vue'
import Login from './../components/Login.vue'
import Welcome from './../components/Welcome.vue'
const routes = [
    {
        name: 'home',
        path: '/',
        meta: {
            title:'首页'
        },
        component: Home,
        redirect:'/welcome',
        children:[
            {
                name: 'welcome',
                path: '/welcome',
                meta: {
                    title:'欢迎页'
                },
                component: Welcome,
            },
            {
                name: 'login',
                path: '/login',
                meta: {
                    title:'登录'
                },
                component: Login,
            }
        ]
    }
]

const router =createRouter({
    history:createWebHashHistory(),
    routes
})
export default router

Home.vue:

<template>
 <div>
   <h1>Yo Yo</h1>
   <router-view></router-view>
 </div>
</template>

<script>
  export default {
    name : 'Home'
  }
</script>

<style >

</style>

Login.vue:

<template>
  <h1>欢迎来到登录界面</h1>
  <el-button @click="goHome">回首页</el-button>
</template>

<script >
 
import {useRouter} from 'vue-router'
 export default {
    name : 'Login'
   }
   const router = useRouter()
   const goHome = ()=>{
   router.push('/welcome')
}
</script>

<style>

</style>

Welcome.vue

<template>
  <h1>欢迎来到欢迎界面</h1>
 <!-- <el-button>去登录</el-button> -->
 <router-link to ="/login">去登录</router-link>
</template>

<script>

 export default {
    name : 'Welcome'
  }
</script>

<style>

</style>

App.vue

<template>
  <router-view></router-view>
</template>

<script>
   export default  {
     name : 'app'
   }
</script>

<style>
 
</style>

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
console.log("环境变量=>",import.meta.env)
const app=createApp(App);
app.use(router).mount('#app')

Answer 1

河畔一角 2023-11-13 23:07:09

语法写错了。你加一下我的qq:534877846，或者加一下课程群，明天我帮你看。

Answer 2

河畔一角 2021-04-26 09:41:19

import {useRouter} from 'vue-router'
export default {
name : 'Login'
}
const router = useRouter()
const goHome = ()=>{
router.push('/welcome')
}
……………………………………………………………
你这语法写错了，没这么讲，如果你要用CompositionAPI，你需要在setup里面定义router，然后需要把goHome函数return回去，你在看下视频或者课程源码

• 提问者 慕慕1545788 #1

  我加上setup后 提示错误 [vite] Internal server error: [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227.
  
  D:/Software/Vue_projects/imooc_vue/demo1/demo1/src/components/Login.vue
  10 |  })
  11 |  import {useRouter} from 'vue-router'
  12 |   export default {
     |   ^^^^^^^^^^^^^^^^
  13 |      name : 'Login'
     |  ^^^^^^^^^^^^^^^^^^
  14 |     }
     |  ^^^^
  之前创建工程的时候记得是带setup,后来删除setup后又重新加上setup反而不行了

• 河畔一角 #2

  在课程群找我一下

• 河畔一角 回复 提问者 慕慕1545788 #3

  问题解决了吗？

点开查看后面1条评论