vue.js - Vue-router 不加载输入到浏览器中的 URL

标签 vue.js vue-router

我有一个使用 Vue-router 的 Laravel 5.3 项目。我正在使用 <router-view></router-view>模板中的标签 (home.blade.php)。

我遇到的唯一问题是我似乎无法通过在路由器中键入 URL 来获取 View 。它只有在我使用 router-link 时才有效在我的 Blade 文件中。

这是我实现路由器的主要 JS 文件:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);
Vue.use(require('vue-resource'));

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const routes = [
  { path: '/view1', component: require('./components/view1.vue')},
  { path: '/view2', component: require('./components/view2.vue')},
  { path: '/view3', component: require('./components/view3.vue')}
]

const router = new VueRouter({
  routes: routes,
})

const app = new Vue({
  router
}).$mount('#app')

我的 web.php 文件:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

//All the authentication routes
Auth::routes();

//Only routing needed for Laravel
Route::get('/{catchall?}', ['as' => 'start', 'middleware' => 'auth', function() {
    return view('home');
}])->where('catchall', '.*');

知道它为什么会这样做吗?

最佳答案

您是否尝试过在 new VueRouter 中设置 history: true,如果您有后端,则不需要使用哈希 URL。

关于vue.js - Vue-router 不加载输入到浏览器中的 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41577545/

相关文章:

javascript - 使用 vue router reactive 使查询参数

javascript - &lt;input type ="number"> 不会阻止输入无效数字,但 "element.value"不允许我更正它们

data-binding - 如何将数据属性设置为 Vuex getter 返回的值

javascript - 路由参数中的数组导致 "Expected to not repeat"警告

javascript - 无法使用 VueRouter 渲染子组件

vue.js - 如何将变量传递给 vue-router v-link

javascript - Vue点击时切换按钮的颜色和文本

javascript - Vue计数字符串长度

javascript - vue-router:如何不使用 `saveScrollPosition`