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

最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0。在使用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。如下官方文档中的例子:

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

时间: 2017-05-21

vue-router 学习快速入门

vue-router 快速入门 配置路由 $ npm install vue-router --save routes.js import Home from './pages/Home.vue' import Gifs from './pages/Gifs.vue' import User from './pages/User.vue' export const routes = [ { path: '', component: Home }, { path: '/gifs', compone

Vue.js实战之利用vue-router实现跳转页面

前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

Vue.js第二天学习笔记(vue-router)

vue中vue-router的使用: main.js如何配置(es6的写法):在引用之前记得先   npm 下所需要的vue import Vue from 'vue' import App from './App.vue' import Router from 'vue-router' import Resource from 'vue-resource' //import VueTouch from 'vue-touch' var VueTouch = require('vue-touch'

VueJs路由跳转——vue-router的使用详解

对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

vue-router:嵌套路由的使用方法

模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

vue-router路由简单案例介绍

官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) 此文是旧版 文件结构图: 基本用法: <router-view>是一个顶级的路由外链,用于渲染匹配的组件. 例如:我的应用入口是app.vue 那么在app.vue中添加如下代码, 此处涉及ES6. app.vue <template> <div class='page inde

Vue.js路由组件vue-router使用方法详解

使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

vue2笔记 — vue-router路由懒加载的实现

在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某

详解vue-router基本使用

路由,其实就是指向的意思,当我点击页面上的home  按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面显示中,有两个部分,一个是需要点击的部分,一个是点击之后,显示点击内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么才能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念

vue-router跳转页面的方法

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

vue router 跳转时打开新页面的示例方法

记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

基于vue循环列表时点击跳转页面的方法

1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

Vue Router的手写实现方法实现

为什么需要前端路由 在前后端分离的现在,大部分应用的展示方式都变成了 SPA(单页面应用 Single Page Application)的模式.为什么会选择 SPA 呢?原因在于: 用户的所有操作都在同一个页面下进行,不进行页面的跳转.用户体验好. 对比多页面,单页面不需要多次向服务器请求加载页面(只请求一次.html文件),只需要向服务器请求数据(多亏了 ajax).因此,浏览器不需要渲染整个页面.用户体验好. 归根结底,还是因为 SPA 能够提供更好的用户体验. 为了更好地实现 SPA,前

Vue Router history模式的配置方法及其原理

vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

ThinkPHP3.1.x修改成功与失败跳转页面的方法

本文实例讲述了ThinkPHP3.1.x修改成功与失败跳转页面的方法.分享给大家供大家参考,具体如下: 在ThinkPHP中,成功与失败的提示页面已经自带.在Action方法中自动调用即可. 比如在Lib\Action有如下的SucErrAction.class.php: <?php class SucErrAction extends Action{ public function index(){ $this->display(); } public function success1()

js判断登录与否并确定跳转页面的方法

本文实例讲述了js判断登录与否并确定跳转页面的方法.分享给大家供大家参考.具体如下: 使用session存储,确定用户是否登录,从而确定页面跳转至哪个页面. 判断本地有无customerID: function jumpTo(p, url) { var customerId=sessionStorage.customerId; if (customerId == undefined) { p.attr("href", "page/Login/login.html")

JavaScript实现单击下拉框选择直接跳转页面的方法

本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/JavaScript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

Vue实现购物车详情页面的方法

上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子: 如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用. 搭出购物车结构 我们将购物车底部构建出来, <templete> <div class="shopcart" :class="{'highligh':totalCount>0}">

vue router 跳转后回到顶部的实例

在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

vue router带参数页面刷新或回退参数消失的解决方法

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456