router-view 无效 组件不跳转
最近做一个项目 设置好路由以后组件就是不跳转而且不报错 结果找了好半天
最后发现是VueRouter的routes属性被我敲成了 routers
// 错误代码
const router = new VueRouter({
mode: 'history',
routers
})
// 改正后
const router = new VueRouter({
mode: 'history',
routes
})
容器页面部分
<template>
<div >
<v-header></v-header>
<div class="tab">
<router-link class="tab-item" to='goods'>商品</router-link>
<router-link class="tab-item" to='ratings'>评论</router-link>
<router-link class="tab-item" to='sell'>商家</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import header from './components/header/header.vue'
export default {
components: {
'v-header': header
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.tab
display:flex
width: 100%
height: 40px;
line-height: 40px;
.tab-item
flex:1
text-align: center
</style>