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 相关文章推荐
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue项目初始化到登录login页面的示例
Oct 31 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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
php xfocus防注入资料
2008/04/27 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
师生聚会感言
2014/01/26 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
施工安全承诺书
2014/05/22 职场文书