vue-router 中router-view不能渲染的解决方法


Posted in Javascript onMay 23, 2017

最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑,router-view不能渲染,花费了好多时间终于发现了原因。

项目目录结构

vue-router 中router-view不能渲染的解决方法

其中main.js

import Vue from 'vue';
import App from './App';
import router from './router';

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 render: h => h(App)
});

app.vue

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

<script>
 export default {
  name: 'app',
  components: {

  }
 };
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  .tab-item
   flex: 1
   text-align: center
   & > a
    display: block
</style>

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from '../components/goods/goods.vue';
import ratings from '../components/ratings/ratings.vue';
import seller from '../components/seller/seller.vue';

Vue.use(VueRouter);

const routes = [
 { path: '/goods', component: goods },
 { path: '/ratings', component: ratings },
 { path: '/seller', component: seller },
 { path: '*', redirect: '/goods' }
];

const router = new VueRouter({
 routes: routes   //注意是routes而不是routers,坑就在这里
});

export default router;

其中在index.js中使用了各种方法,最后查看文档发现原来是routes惹的祸,每次都写的是routers,导致路由根本就没有导入进去,所以在渲染的时候一直不能显示content。如下官方文档中的例子:

vue-router 中router-view不能渲染的解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
angular+webpack2实战例子
May 23 #Javascript
jquery实现图片轮播器
May 23 #jQuery
详解用node编写自己的cli工具
May 23 #Javascript
JavaScript 巧学巧用
May 23 #Javascript
JS获取短信验证码倒计时的实现代码
May 22 #Javascript
原生JS实现不断变化的标签
May 22 #Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
You might like
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
浅谈php的优缺点
2015/07/14 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python中的二维列表实例详解
2018/06/19 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
竞选团支书演讲稿
2014/04/28 职场文书
院系推荐意见
2015/06/05 职场文书
python中数组和列表的简单实例
2022/03/25 Python
Tomcat弱口令复现及利用
2022/05/06 Servers
TS 类型收窄教程示例详解
2022/09/23 Javascript