VueJS 2 vue-router 2 (laravel 5.3)

Posted 2023-02-22

【中文标题】VueJS 2 vue-router 2 (laravel 5.3)

【英文标题】：

【发布时间】：2017-05-23 15:16:18

【问题描述】：

我正在尝试使用 (vue-router 2) router-link 在 (VueJS 2) 组件之间进行链接。单击链接时，刀片（laravel 5.3）中使用的 URL 未更新，我使用了 router-link 并且已经替换了 v-link，所以我可以获得任何示例以在刀片中使用 vue-router（laravel 5.3 最新版本）

控制台错误：路由器未定义

app.js

window._ = require('lodash');
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
    window.Vue = require('vue');
    window.VueRouter = require('vue-router');
    require('vue-resource');
    Vue.use(VueRouter);
    var App = Vue.extend();
    var router = new VueRouter(
        routes: [
             path: '/AddServices', component: require('./components/Test.vue') 
        ]
    );
    new Vue(
            el: '#appp',
            router: router,
            render: h => h('router-view')
    );

    Vue.http.interceptors.push((request, next) => 
        request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

        next();
    );

balde 有链接 app.blade.php

<router-link to="/AddServices">/AddServices</router-link>
<router-link to="/AddServices"><a>/AddServices</a></router-link>

blade 有 id 来执行操作 home.blade.php

<div class="container">
    <div class="row" id="appp">
            <router-view></router-view>
        </div>
    </div>

【问题讨论】：

你应该分享你声明你的应用程序、路由等的代码。如果我们看不到负责你的代码，没有人能告诉你你在哪里弄错了错误。

感谢您回复我的代码

【参考方案1】：

你的代码有几个错别字，请检查没有';'的Vue.use(VueRouter)。 el:"#appp"?，虽然清除这些编译器首先失败。图旁边的步骤

【讨论】：

你能把它清理一下吗？除了第 7 行缺少分号之外，我不知道您要说什么。

已更改，但我在刀片路由器链接标签中遇到问题，当我关注时，我的浏览器中没有链接不显示链接我必须添加一些东西（安装）以使其工作或不路由器链接标签当我在blade.php中添加它时不起作用在控制台中看到这个问题“路由器未定义”，当我在放置这个标签后放置组件示例时，这个组件消失并在控制台中显示这个错误

【参考方案2】：

首先，你不需要创建新的路由器实例

var router = new VueRouter(
...

并拥有

Vue.use(VueRouter) // you can remove that one

其次，如果你只有1个url，你期望url如何变化？

试试这个路由器

var router = new VueRouter(
    routes: [
         path: '/', component: require('./components/Example.vue') ,
         path: '/AddServices', component: require('./components/Test.vue') 
    ]
);

这里是链接（不要把<a>标签放在<router-link>里面

<router-link to="/">/index</router-link>
<router-link to="/AddServices">/AddServices</router-link>

【讨论】：

我在我的刀片中使用 router-link 在单击后没有执行任何操作，它在浏览器中的显示未链接并在控制台中看到错误：路由器未定义

我唯一能想到的是如果你还没有安装 vue-router ？ npm install vue-router ?除此之外，我没有看到代码有任何问题。无论如何，这是一个工作示例，说明您从我的 vue 学习课程中尝试实现 raw.githubusercontent.com/tsvetant/laravue/master/resources/…。也许您可以使用它来跟踪您所犯的错误。

当我在刀片中使用 router-link 时我的所有问题都没有显示链接，它只显示正常字符串而不是浏览器中的链接，并且看到 consol 说路由未定义，我已经安装了“vue”：“^2.0. 1", "vue-resource": "^1.0.3", "vue-router": "^2.1.1"