Vue新手点击按钮跳转视图失败：严格模式函数声明报错问题

1 核心报错原因：Login.vue的script语法不合法 #

你当前<script>标签内直接写methods: {}不属于合法的JS语法，Vue单文件组件的所有配置项必须包裹在export default {}导出的组件对象内，你现在的写法相当于直接在script顶层写对象的键值对，违反了严格模式的语法要求，所以抛出对应报错。

2 修复步骤 #

第一步：修正Login.vue的script代码 #

<script>
export default {
  methods: {
    login: function () {
      // 注意你的路由配置中未定义`/home`路径，根路径`/`对应Home组件，因此跳转路径改为`/`
      this.$router.push('/')
      // 如果你需要使用`/home`作为访问路径，可以去router.js中把Home对应的path修改为`/home`
    }
  }
}
</script>

第二步：修正路由文件相关问题 #

• 先把路由文件的文件名从错误的rouetr.js改为正确的router.js，避免导入报错
• 如果你需要保留/home作为Home页的访问路径，修改router.js中的路由配置：

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: Home,
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    // 可选：添加根路径重定向到/home
    {
        path: '/',
        redirect: '/home'
    }
];

第三步：确认main.js中正确注册路由 #

确保你的项目入口文件main.js中已经导入并注册了router实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路径和文件名要对应

Vue.config.productionTip = false

new Vue({
  router, // 必须传入router实例，组件内才能使用this.$router
  render: h => h(App),
}).$mount('#app')

内容的提问来源于stack exchange，提问作者Peaca