router-link跳转到‘/city’页面但是页面为空（控制台无报错）

来源：8-1 Vue项目城市选择页 - 路由配置

慕的地0077756

2021-02-09

在网上查了一下，但是没有找到特别相关的问题。

/src/router/index.js ⬇️

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      compoenent: City
    }
  ]
})

/src/pages/home/Header.vue ⬇️

// 部分内容
<router-link to='/city'>
      <div class='header-right'>
        {{this.city}}
        <span class='iconfont'>&#xe64a;</span>
      </div>
</router-link>

/src/pages/city/City.vue ⬇️

<template>
  <city-header></city-header>
</template>

<script>
import CityHeader from './components/Header'
export default {
  name: 'City',
  components: {
    CityHeader
  }
}
</script>

<style lang='stylus' scoped>
</style>

/src/pages/city/components/Header.vue ⬇️

<template>
    <div>城市选择</div>
</template>

<script>
console.log('header')
export default {
  name: 'CityHeader'
}
</script>

<style lang='stylus' scoped>
    @import '~styles/variables.styl'
    .header
        overflow: hidden
        height: .86rem
        line-height: .86rem
        text-align: center
        color: #fff
</style>