如何通过URL（vue-router）打开Vue组件？Laravel5+VueJs项目场景

嘿，我来帮你一步步搞定这个问题~ 要让URL能正确加载对应的Vue组件，你需要确保vue-router的配置、Vue实例挂载以及Laravel的路由 fallback 这几个环节都设置正确，具体如下：

1. 配置vue-router的路由规则 #

首先，在你的Vue项目文件（通常是resources/js/router.js）里定义每个URL路径对应的组件：

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

// 导入你要加载的Vue组件
import Authors from './components/Authors.vue'
import Donate from './components/Donate.vue'
import Feedback from './components/Feedback.vue'

Vue.use(VueRouter)

// 定义路由映射
const routes = [
  { path: '/authors/', component: Authors },
  { path: '/donate/', component: Donate },
  { path: '/feedback/', component: Feedback },
  // 可选：添加默认路由，当访问不存在的路径时跳转到Authors页面
  { path: '*', redirect: '/authors/' }
]

// 创建路由实例，这里用history模式去掉URL里的#（可选，也可以用默认的hash模式）
const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

2. 在主Vue实例中挂载路由 #

打开resources/js/app.js，把刚才配置的路由挂载到Vue实例上：

import Vue from 'vue'
import router from './router'

// 初始化Vue实例并挂载路由
const app = new Vue({
    el: '#app',
    router
})

3. 配置Laravel的Fallback路由（针对history模式） #

如果你用了上面的history模式（URL不带#），需要在Laravel的routes/web.php里添加一个 fallback 路由，让所有非API的请求都返回你的主视图，这样vue-router才能接管路由逻辑：

// 让所有非API的请求都返回主视图
Route::get('/{any}', function () {
    return view('welcome'); // 这里替换成你的主视图文件名，比如app.blade.php
})->where('any', '.*');

4. 确保主视图包含路由出口 #

最后，在你的Laravel主视图（比如resources/views/welcome.blade.php）里，除了现有的菜单，还要加上<router-view></router-view>标签——这是vue-router渲染对应组件的地方：

<div id="app">
    <!-- 你的现有菜单代码 -->
    <div class="collapse navbar-collapse" id="main-menu" > 
        <ul class="nav navbar-nav">
            <li><router-link to="/authors/">Authors</router-link></li>
            <li><router-link to="/donate/">Donate</router-link></li>
            <li><router-link to="/feedback/">Feedback</router-link></li>
        </ul>
    </div>

    <!-- 路由视图出口：对应的Vue组件会在这里渲染 -->
    <router-view></router-view>
</div>

<!-- 引入编译后的Vue脚本 -->
<script src="{{ mix('/js/app.js') }}"></script>

几个关键注意点 #

• <router-view>不能少：这是组件的渲染容器，没有它，点击路由链接或者直接访问URL都看不到组件内容。
• 组件路径要正确：确保你导入的组件文件路径和实际文件位置匹配，比如如果组件放在resources/js/components下，上面的导入路径就是对的。
• hash模式可选：如果你不想配置Laravel的fallback路由，可以把vue-router的mode改成hash（默认值），此时URL会带#，比如http://your-domain/#/authors/，直接访问这个URL也能加载对应的组件。

现在你直接在浏览器里输入http://your-domain/authors/、http://your-domain/donate/这些URL，就能看到对应的Vue组件啦~

内容的提问来源于stack exchange，提问作者Viktor