vue-router的router-view不能渲染;vue2.0中遇到的路由上的一些坑

转载 2017年05月08日 09:02:37


0

试一下在App.vue中的mounted钩子中加载默认route
[rootVue].$router.push('/foo');
[rootVue]必须替换成指向你的Vue实例

0

今天开始上vue班车,尝试搭建框架的时候,我也遇到了router-view和router-link不能渲染的问题。

接着我看了vue官方的demo,修改了几处,就可以正常渲染了。

测试版本:

"vue": "^2.2.6",
"vue-router": "^2.4.0"

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';

const router = new VueRouter({
    mode: 'history',
    base: __dirname, //这个很重要
    routes         //这个是需要注意的,路由的规则名称不能写错;我就是出错出在这里了,找到老半天的错误
})

new Vue({
    router,
    el: '#app',
    render: h => h(App)
});

App.vue

<template>
    <div>
        <ul>
            <li><router-link to="/">home</router-link></li>
            <li><router-link to="/foo">foo</router-link></li>
        </ul>
        <router-view class="view"></router-view>
    </div>
</template>

<script>
    export default {
        name: 'App'
    };
</script>

routes.js

import Home from './components/home/Home.vue';
import Foo from './components/foo/Foo.vue';

export default [
    {
        path: '/',
        component: Home
    },
    {
        path: '/foo',
        component: Foo
    }
]

相关文章推荐

vue2.0环境搭建(含router路由)

vue2.0环境搭建(含router路由)

vue-router2.0,子路由的使用

Redirect and Alias Redirect Redirecting is also done in the routes configuration. To redirect from...

vue-router: 嵌套路由

模板抽离我们已经学习过了Vue模板的另外定义形式,使用。 首页 新闻 然后js里定义路...

Vuejs学习之-----vue-router实现路由功能

虽然现在是vue2.x版本的,但是我想从最基础的vue1.x开始学起,后续会用2.0的版本Vue-router1.0的版本github地址,不过都是英文的,正好可以锻炼阅读英文文档的能力 https...

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

对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成。 安装 基于传统,我更喜欢采用npm包的形式进行安装。 npm install vue-rou...

vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法

vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法需求分析导航上有2个菜单,指向的是同一个列表,但是是不同的状态。我需要根据不同的状态获取状态参数给接口拿到不同的数据...
  • FungLeo
  • FungLeo
  • 2017年01月06日 17:08
  • 6541

Weex入门教程之10,vue-router 路由

介绍 Vue in Weex Vue.js 是 Evan You 开发的渐进式 JavaScript 框架,在易用性、灵活性和性能等方面都非常优秀。开发者能够通过撰写 *.vue 文件,...

Vue-router嵌套路由的使用

路由使用的时候需要设置路由的路径: ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top...

使用Vue-Router 2实现路由功能

注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-rout...

使用vue2+Vuex+Router写的Demo以及遇到的一些坑和使用建议

我的开源中国博客:https://my.oschina.net/keysITer/blog/834287 一直对vue很感兴趣,最近使用vue2.0开发了高仿饿了么点餐系统来练练手,不得不说vue...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue-router的router-view不能渲染;vue2.0中遇到的路由上的一些坑
举报原因:
原因补充:

(最多只允许输入30个字)