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 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
详解javascript replace高级用法
Feb 17 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
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 缓冲的免费实现方法
2006/10/09 PHP
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python的高级Git库 Gittle
2014/09/22 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python3转换code128条形码的方法
2019/04/17 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
会计自我鉴定范文
2013/10/06 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS