New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue-router的入门教程起步与实际操作不符合 #2558

Closed
ggguang opened this Issue Dec 27, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@ggguang
Copy link

ggguang commented Dec 27, 2018

Version

3.0.2

Reproduction link

https://router.vuejs.org/zh/guide/#javascript

Steps to reproduce

使用 cli 创建项目
"vue": "^2.5.17",
"vue-router": "^3.0.2"
修改 main.js 如下
main

import Vue from 'vue'
// import router from './routes/index.js'
import App from './App.vue'
// import Foo from './components/Foo.vue'
// import Bar from './components/Bar.vue'

Vue.config.productionTip = false

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
    {path: '/foo', component: Foo},
    {path: '/bar', component: Bar}
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

// router.start(App,"router-view")

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

App.vue 修改如下
app

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Hello App!</h1>
    <p>
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <div><router-view></router-view></div>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

What is expected?

路由跳转到指定 foo and bar
为什么不跳转呢。

What is actually happening?

路由不跳转,只有修改成import引入foo和bar模块
才正常跳转
debug:
debug
这种debug如何查看。给教程链接也行

@sodatea

This comment has been minimized.

Copy link
Member

sodatea commented Dec 27, 2018

If you are using Vue CLI, see https://cli.vuejs.org/config/#runtimecompiler

@ggguang

This comment has been minimized.

Copy link

ggguang commented Dec 27, 2018

If you are using Vue CLI, see https://cli.vuejs.org/config/#runtimecompiler

谢谢你

@ggguang ggguang closed this Dec 27, 2018

@posva

This comment has been minimized.

Copy link
Member

posva commented Dec 27, 2018

Remember you can use the forum, the Discord server or StackOverflow for questions 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment