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...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

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

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

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

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

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

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

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

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

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

我的开源中国博客:https://my.oschina.net/keysITer/blog/834287 一直对vue很感兴趣,最近使用vue2.0开发了高仿饿了么点餐系统来练练手,不得不说vue...

vue-router 路由元信息

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, met...

vue-router 路由基础简单介绍

今天我总结了一下vue-route基础,vue官方推荐的路由。一、起步HTML 简单路由 Go to foo Go to bar // 渲染出口 <

Vue-router2.0基础实践

1)基础用法: Hello App! 默认会被渲染成一个 `` 标签 --> Go to Foo ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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