Vue.js-System.js项目路由跳转异常：scope.router未定义/资源404错误

我来帮你一步步拆解并解决遇到的这两个关联问题：router未定义和System.js source map 404错误：

1. 修复scope.router未定义的问题 #

这个问题的核心是组件没有正确访问到Vue Router实例。Vue Router会自动把实例注入到所有子组件的$router属性中，而非直接暴露为全局的router变量，你需要调整组件的写法：

方案一：直接在模板中使用$router #

把模板里的点击事件改成调用$router.push，同时去掉空的href属性：

<a type="button" @click="$router.push('/registrations')" style="cursor: pointer;">REGISTRATION</a>

添加cursor: pointer是为了让元素看起来像可点击的链接，提升用户体验。

方案二：通过组件方法处理跳转（适合复杂逻辑场景） #

如果后续需要在跳转前添加验证等逻辑，可以把跳转逻辑放到组件的methods中：

<a type="button" @click="goToRegistration" style="cursor: pointer;">REGISTRATION</a>

然后在组件脚本中：

export default {
  methods: {
    goToRegistration() {
      // 这里可以添加前置逻辑，比如表单校验
      this.$router.push('/registrations')
    }
  }
}

另外，请确保你的Vue实例已经正确挂载了Router，入口文件（比如main.js）的初始化代码应该类似这样：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes/index'

// 注册Vue Router插件
Vue.use(VueRouter)

// 创建Router实例
const router = new VueRouter({
  routes // 传入你的路由配置
})

// 挂载到Vue实例
new Vue({
  router,
  el: '#app'
})

2. 解决System.js Source Map 404错误 #

当你保留href=""时，浏览器会尝试请求当前页面的空路径，这可能触发System.js加载对应的source map文件（如果配置中开启了source map），但该文件不存在导致404。解决方法有两种：

方法一：避免空href属性 #

按照上面的方案去掉href，或者设置href="javascript:void(0)"，这样不会触发浏览器的默认跳转行为：

<a type="button" @click="$router.push('/registrations')" href="javascript:void(0)">REGISTRATION</a>

方法二：调整System.js的Source Map配置 #

如果不需要source map，可以在System.js的配置中关闭它，避免不必要的请求：

System.config({
  meta: {
    '*': {
      sourceMap: false
    }
  }
})

如果确实需要source map，请确保对应的.map文件存在于正确的路径下。

总结 #

优先解决路由实例的访问问题（用this.$router代替router），同时处理空href带来的浏览器默认行为，这样两个问题应该都能解决。后续迁移到Webpack 2时，这些Vue Router的核心用法是一致的，不会有太大变化。

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