2017-01-09 97 views
-3

我尝试使用(vue-router 2)路由器链接在(VueJS 2)组件之间进行链接。点击一个链接时,该URL不会更新在刀片中使用(laravel 5.3)我使用了router-link,并且已经更换了v-link,因此我可以使用任何示例在刀片中使用vue-router(laravel 5.3最新版本)VueJS 2 vue-router 2(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(); 
    }); 

巴尔德有链接app.blade.php

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

刀片具有ID,使行动home.blade.php

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

旁边的步骤你应该共享代码,你声明你的应用程序,路线等。如果我们无法看到导致错误的代码段,则无法告诉您错误的位置。 – dev

+0

谢谢你的回复那里我的代码 – amryami

回答

0

第一件事,第一,你不需要建立新的路由器实例

var router = new VueRouter({ 
... 

,并有

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

二,怎么做如果您只有1个网址,您希望网址发生变化?

试试这个路由器

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> 
+0

我在我的刀片中使用路由器链接没有做任何行动之后,点击并在浏览器中显示不链接,并看到在控制台错误:路由器是undefined – amryami

+0

我唯一能想出的是如果你没有安装vue-router? 'npm install vue-router'?除此之外,我没有看到代码有任何问题。无论如何,这里是您尝试通过vue学习会话来实现https://raw.githubusercontent.com/tsvetant/laravue/master/resources/assets/js/app.js的工作示例。也许你可以跟踪你使用这个做出的错误。 – dev

+0

所有我的问题,当我在刀片中使用路由器链接没有使链接其显示只有正常的字符串没有链接在浏览器中,看到CONSOL说路线未定义,我已经安装“vue”:“^ 2.0.1”, “vue-资源“:”^ 1.0.3“, ”vue-router“:”^ 2.1.1“ – amryami

0

有在你的代码的几个错别字,请Vue.use(VueRouter )没有';'。el:“#appp”?,而清除这些编译器首先失败。图

+0

你可以清理一下吗?我不知道你在说什么,除了他们在第7行丢失分号。 – Loaf

+0

已更改,但我有问题在刀片路由器链接标记不是链接在我的浏览器时,我的重点是没有显示它链接我必须添加东西(安装),使其工作或没有路由器链接标记是行不通的,当我在blade.php中添加它在控制台中看到这个问题“路由器是未定义的”,当我把组件的例子后,把这个标签这个组件消失并显示在控制台中这个错误 – amryami