{"action":"closed","issue":{"url":"https://api.github.com/repos/vuejs/vue-router/issues/2558","repository_url":"https://api.github.com/repos/vuejs/vue-router","labels_url":"https://api.github.com/repos/vuejs/vue-router/issues/2558/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-router/issues/2558/comments","events_url":"https://api.github.com/repos/vuejs/vue-router/issues/2558/events","html_url":"https://github.com/vuejs/vue-router/issues/2558","id":394339413,"node_id":"MDU6SXNzdWUzOTQzMzk0MTM=","number":2558,"title":"vue-router的入门教程起步与实际操作不符合","user":{"login":"ggguang","id":28919639,"node_id":"MDQ6VXNlcjI4OTE5NjM5","avatar_url":"https://avatars1.githubusercontent.com/u/28919639?v=4","gravatar_id":"","url":"https://api.github.com/users/ggguang","html_url":"https://github.com/ggguang","followers_url":"https://api.github.com/users/ggguang/followers","following_url":"https://api.github.com/users/ggguang/following{/other_user}","gists_url":"https://api.github.com/users/ggguang/gists{/gist_id}","starred_url":"https://api.github.com/users/ggguang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ggguang/subscriptions","organizations_url":"https://api.github.com/users/ggguang/orgs","repos_url":"https://api.github.com/users/ggguang/repos","events_url":"https://api.github.com/users/ggguang/events{/privacy}","received_events_url":"https://api.github.com/users/ggguang/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-12-27T09:13:34Z","updated_at":"2018-12-27T09:30:36Z","closed_at":"2018-12-27T09:30:36Z","author_association":"NONE","body":"### Version\r\n3.0.2\r\n\r\n### Reproduction link\r\n[https://router.vuejs.org/zh/guide/#javascript](https://router.vuejs.org/zh/guide/#javascript)\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### Steps to reproduce\r\n使用 cli 创建项目\r\n\"vue\": \"^2.5.17\",\r\n\"vue-router\": \"^3.0.2\"\r\n修改 main.js 如下\r\n![main](https://user-images.githubusercontent.com/28919639/50473575-66a2de80-09f8-11e9-8d9c-7200ccd21750.jpg)\r\n```js\r\nimport Vue from 'vue'\r\n// import router from './routes/index.js'\r\nimport App from './App.vue'\r\n// import Foo from './components/Foo.vue'\r\n// import Bar from './components/Bar.vue'\r\n\r\nVue.config.productionTip = false\r\n\r\n// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)\r\nimport VueRouter from 'vue-router'\r\n\r\nVue.use(VueRouter)\r\n\r\n// 1. 定义 (路由) 组件。\r\n// 可以从其他文件 import 进来\r\nconst Foo = {template: '<div>foo</div>'}\r\nconst Bar = {template: '<div>bar</div>'}\r\n\r\n// 2. 定义路由\r\n// 每个路由应该映射一个组件。 其中\"component\" 可以是\r\n// 通过 Vue.extend() 创建的组件构造器，\r\n// 或者，只是一个组件配置对象。\r\n// 我们晚点再讨论嵌套路由。\r\nconst routes = [\r\n    {path: '/foo', component: Foo},\r\n    {path: '/bar', component: Bar}\r\n]\r\n\r\n// 3. 创建 router 实例，然后传 `routes` 配置\r\n// 你还可以传别的配置参数, 不过先这么简单着吧。\r\nconst router = new VueRouter({\r\n    routes // (缩写) 相当于 routes: routes\r\n})\r\n\r\n// router.start(App,\"router-view\")\r\n\r\nnew Vue({\r\n    router,\r\n    render: h => h(App),\r\n}).$mount('#app')\r\n```\r\n\r\nApp.vue 修改如下\r\n<img width=\"1027\" alt=\"app\" src=\"https://user-images.githubusercontent.com/28919639/50473583-6f93b000-09f8-11e9-95bd-889387c865cf.png\">\r\n```vue\r\n<template>\r\n  <div id=\"app\">\r\n    <img alt=\"Vue logo\" src=\"./assets/logo.png\">\r\n    <h1>Hello App!</h1>\r\n    <p>\r\n      <!-- 使用 router-link 组件来导航. -->\r\n      <!-- 通过传入 `to` 属性指定链接. -->\r\n      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->\r\n      <router-link to=\"/foo\">Go to Foo</router-link>\r\n      <router-link to=\"/bar\">Go to Bar</router-link>\r\n    </p>\r\n    <!-- 路由出口 -->\r\n    <!-- 路由匹配到的组件将渲染在这里 -->\r\n    <div><router-view></router-view></div>\r\n  </div>\r\n</template>\r\n\r\n<style>\r\n#app {\r\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  text-align: center;\r\n  color: #2c3e50;\r\n  margin-top: 60px;\r\n}\r\n</style>\r\n\r\n```\r\n\r\n### What is expected?\r\n路由跳转到指定 foo and bar\r\n为什么不跳转呢。\r\n\r\n### What is actually happening?\r\n路由不跳转，只有修改成import引入foo和bar模块\r\n才正常跳转\r\ndebug:\r\n<img width=\"1438\" alt=\"debug\" src=\"https://user-images.githubusercontent.com/28919639/50473592-77535480-09f8-11e9-90a7-c47948f1ecb8.png\">\r\n这种debug如何查看。给教程链接也行\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"}}
{"actor":{"display_login":"ggguang"}}