Блог

Главная - Вопросы по программированию - Vue не хочет работать как ссылка, он отображается в виде простого текста. Что я делаю не так?

Vue не хочет работать как ссылка, он отображается в виде простого текста. Что я делаю не так?

#laravel #vue.js #vue-component #vue-router #vuejs3

Вопрос:

Я использую vue js в проекте laravel. Я хочу сделать свой проект одностраничным приложением, поэтому мне нужны маршруты vue. Я установил последние версии vue-загрузчика, vue-компилятора шаблонов, vue, vue-маршрутизатора, но проблема все еще существует.

app.js

 import bootstrap from 'bootstrap';

import {createApp} from "vue";
import { createRouter, createWebHistory } from 'vue-router'
import Login from './components/auth/Login.vue'
import Register from "./components/auth/Register";

window.$ = require( "jquery" );

const routes = [
    {
        path: '/',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'Register',
        component: Register
    }
]

const router = createRouter({
    history: createWebHistory(process.env.APP_URL),
    routes
})

const app = createApp({});
app.component('login', Login);
app.mount('#app');
export default router

vue.blade.php

 <body>
<div id="app">
    <router-link to="/register">Harrison</router-link>
    <router-view> </router-view>
</div>

<script src="{{mix('js/app.js')}}"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
</body>
</html>

Я устаю искать ответы в Google, но ничего не помогает. Можете ли вы помочь мне понять, что я делаю не так?

Комментарии:

1. Я думаю, что вы добавляете router-link тег в файл блейда. это не будет работать в файле blade. для этого вам нужно создать файл vue.

Ответ №1:

Похоже app.js , что не регистрируется плагин маршрутизатора Vue. Чтобы зарегистрировать плагин, используйте app.use() :

 // main.js
const router = createRouter(/*...*/)

const app = createApp(App)
app.use(router) 👈
app.mount('#app')

Также нет необходимости экспортировать маршрутизатор из app.js .

Ответ №2:

Вам нужно создать компонент приложения Vue. Предположим, что это содержимое файла под названием app.vue :

 <template>
    <router-link to="/register">Harrison</router-link>
    <router-view> </router-view>
</template>

<script>
export default {
  name: "App"
}
</script>

Затем сделайте так, чтобы ваш html-файл выглядел так:

 <body>
<div id="app"></div>

<script src="{{mix('js/app.js')}}"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
</body>
</html>

Наконец, измените некоторые строки в своем app.js файле:

 ...
import App from "app.vue"
...
const app = createApp(App);
app.use(router);
...

И тогда это должно сработать.
(Кстати: ты в Vue2 курсе или Vue3 нет ?)

Метки: ,