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
    }
]

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

答案对人有帮助,有参考价值 0 答案没帮助,是错误的答案,答非所问 试一下在App.vue中的mounted钩子中加载默认route [rootVue].$router.pus...
  • will5451
  • will5451
  • 2017年05月08日 09:02
  • 5313

vue2.0 路由不显示router-view

今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=||这是花了一上午整...
  • zy1281539626
  • zy1281539626
  • 2017年06月16日 14:11
  • 1512

Vue-router嵌套路由的使用

路由使用的时候需要设置路由的路径: ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top...
  • a641832648
  • a641832648
  • 2017年03月21日 16:59
  • 3714

vue2.0 vue-router学习笔记

最近在学习vue.js 2.x。vue-router是其中十分重要的一部分。 在以前的学习中,用过很多后端的路由,比如在laravel框架中,路由的功能是根据前端不同的URL请求,根据路由匹配将请求...
  • zhangyangblog
  • zhangyangblog
  • 2017年08月29日 14:04
  • 185

vue-router: 嵌套路由

模板抽离我们已经学习过了Vue模板的另外定义形式,使用。 首页 新闻 然后js里定义路...
  • github_26672553
  • github_26672553
  • 2017年02月04日 10:14
  • 29513

vue-router -- 命名路由和命名视图

说明:vue-router的几个文章中例子是连贯的,因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字,根据名字进行匹配 给不同的router-view定义名字,rou...
  • weixin_31765427
  • weixin_31765427
  • 2017年09月07日 15:58
  • 1921

vue-router直接在html里面使用

一、普通方式基本例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 1...
  • zhalcie2011
  • zhalcie2011
  • 2017年05月05日 11:15
  • 2039

Vue路由开启keep-alive时的注意点

这个不是业务的要求,但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM,觉得作为一个前端工程师有必要优化下的加载逻辑,正好vue提供了 keep-alive 的功能,所以就试用了下。当然,干...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月15日 17:26
  • 4975

Vue---router--项目组件传参数

html> html lang="en"> head> meta charset="UTF-8"> title>vue-routertitle> link rel="style...
  • guohao326
  • guohao326
  • 2017年06月01日 16:40
  • 271

vue2.0开发过程中踩的坑!

vue2.0开发过程中踩的坑!
  • lemon_zhao
  • lemon_zhao
  • 2017年02月17日 15:39
  • 6332
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:vue-router的router-view不能渲染;vue2.0中遇到的路由上的一些坑
举报原因:
原因补充:

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