Laravel中Vue Router Link无法使用问题求助

Hey there, let's get that router-link error sorted out! The issue here is that while you've imported and told Vue to use VueRouter, you haven't finished setting up the actual router instance and linking it to your Vue app. Here's what you need to do step by step:

Step 1: Define Your Route Config #

First, add a routes array to your app.js that maps URL paths to your components. For example:

const routes = [
    { path: '/articles', component: Articles },
    // Add more routes for other components here as needed
];

Step 2: Create the VueRouter Instance #

Next, initialize the VueRouter with your routes configuration. You can also add the history mode to clean up URLs (just make sure your Laravel backend is set up to handle this):

const router = new VueRouter({
    routes, // Shorthand for `routes: routes`
    mode: 'history' // Optional: removes the # from URLs
});

Step 3: Attach Router to Your Root Vue Instance #

Finally, when you create your main Vue instance (usually at the bottom of app.js), pass the router instance into it. This is what makes router-link and other router components available across your app:

const app = new Vue({
    el: '#app',
    router // Attach the router here
});

Full Updated app.js Example #

Putting it all together, your app.js should look like this:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Articles from './components/Articles.vue'
import Navbar from './components/Navbar.vue'

Vue.use(VueRouter);

// Define your route mappings
const routes = [
    { path: '/articles', component: Articles },
    // Add additional routes here
];

// Create the router instance
const router = new VueRouter({
    routes,
    mode: 'history'
});

// Initialize Vue with the router attached
const app = new Vue({
    el: '#app',
    router
});

One Critical Detail Don't Miss #

Make sure your root component (either in your Blade template or main Vue component) includes the <router-view> tag. This is where the content from your routed components will render:

<!-- In your Blade file or App.vue -->
<navbar></navbar>
<router-view></router-view>

Final Check #

Don't forget to recompile your assets with Laravel Mix to apply the changes:

npm run dev
# Or use `npm run watch` to auto-recompile when you edit files

That should resolve the "Unknown custom element: " error—Vue will now recognize all router-related components once the router is properly attached to your app.

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