router-link 无法在 Vuejs 中正确创建链接答案

【问题标题】：router-link does not create links properly in Vuejsrouter-link 无法在 Vuejs 中正确创建链接
【发布时间】：2017-07-01 07:04:22
【问题描述】：

我想通过Vue-router 插件创建指向组件的简单链接。

为此，我创建了一个像这样的routes.js 文件：

import VueRoute from 'vue-router';

let routes = [
    {
        path: '/',
        component: './components/Home'
    },
    {
        path: '/About',
        component: './components/About'
    }
];

export default new VueRoute({
    routes
});

还有app.js这样的文件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import router from 'routes';

window.Vue   = Vue;
window.axios = axios;
Vue.use(VueRouter);

new Vue({
    el: '#app',
    router
});

这是我的母版页内容：

<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/app.css">
    <title>My First Laravel Vue App </title>
</head>
<body>
<div id="app">

    <router-link to="/">Home</router-link>
    <router-link to="/About">About</router-link>

</div>

<script src="/js/app.js"></script>
</body>
</html>

但是当我打开页面时编译所有 js 文件后，router-link 不起作用，而是创建一个简单的空 html 注释。

我不知道什么是问题，我该如何解决。

更新：

我将 import router from 'routes'; 更改为 import router from './routes' 并且所有内容都很好！

【问题讨论】：

不是import VueRouter from 'vue-router'; 吗？
@Pradeepb，是的。
我的意思是在routes.js 文件中。改正后还是不行？
如您所见，它位于routes.js 文件的开头。即使在更正之后它也不起作用。
我看到的是VueRoute，而不是VueRouter。

标签： javascript laravel vuejs2 vue-router

【解决方案1】：

您已经完成所有设置，但忘记了router-view

像这样添加它：

<body>
<div id="app">

    <router-link to="/">Home</router-link>
    <router-link to="/About">About</router-link>

    <router-view></router-view>
</div>

<script src="/js/app.js"></script>
</body>

匹配的路由在router-view中渲染

编辑

路由对象的component 属性应该是组件本身，但你传递给它的是一个字符串

所以这样做：

    import VueRoute from 'vue-router';

import Home from './components/Home'
import About from './components/About')

let routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/About',
        component: About
    }
];

export default new VueRoute({
    routes
});

【讨论】：

我关注了 laracast 系列的Vue SPA Essentials: Routing。在那里，没有使用<router-view></router-view>，一切正常。
即使添加了<router-view></router-view>，问题也没有解决。
和component: require('./components/Home')有区别吗？我使用了require()，但没有解决。
不，任何错误。 no 在运行页面后编译 no。页面中只会出现; 字符。
@A.B.Developer 你是否在 div 中添加了 router-view 和 id='app' ？