vue-router中的router-view不渲染问题,求解!!!

新手上路,请多包涵

做了一个简单的项目,但是<router-view></router-view>不能渲染,代码如下:
App.vue

<template>
  <div id="app">
    <e-header></e-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import header from './components/header/header.vue'
export default {
  name: 'app',
  components: {
    'e-header': header
  }
}
</script>

<style lang="stylus" rel="stylesheet/syulus">
  #app 
    font-family: 'Microsoft Yahei'
    .tab
      width: 100%
      display: flex
      height: 40px
      line-height: 40px
      .tab-item
        flex: 1
        text-align: center

  
</style>

goods.vue

<template>
    <div>goods content</div>
</template>
<script>
    export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus">
    
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Goods from './components/goods/goods.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Vue.config.productionTip = false

const Seller = {
  template: '<p>seller</p>'
}

const Ratings = {
  template: '<p>ragings</p>'
}

const routes = [
  {
    path: '/goods',
    template: Goods
  },
  {
    path: 'seller',
    template: Seller
  },
  {
    path: 'ratings',
    template: Ratings
  }
]

const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: {App},
  router
})

现在的效果是,点击导航可以切换,但是router-view不能渲染。

阅读 4.9k
1 个回答

先改一下这个bug
`const routes = [
{

path: '/goods',
template: Goods

},
{

path: 'seller',
template: Seller

},
{

path: 'ratings',
template: Ratings

}
]`

path: '/seller',
path: '/ratings',

前面加“/”

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题