VueJS Router-ссылка не ссылается на вид - PullRequest
Новая
       7

VueJS Router-ссылка не ссылается на вид

0 голосов
/ 18 января 2019

У меня проблема с роутером.Когда я ставлю его в вид, он работает очень хорошо, у меня есть кликабельная ссылка.Но когда я помещаю ссылку на маршрутизатор в компонент, встроенный в представление, тогда ссылка на маршрутизатор больше не работает: я хотел бы просто указать ссылку на детали проекта.

Эта работа (resources/js/views/HomepageView.vue) 

 <router-link :to="{ name: 'projects.show', params: { slug: slideshowProject.slug }}">
    <a href="#" class="btn-secondary">See
        Campaign</a>
</router-link>

Это не работает (resources/js/components/UserProject.vue) 

<router-link :to="{ name: 'projects.show', params: { slug: project.slug }}">
    <h4>{‌{ project.title}}</h4>
</router-link>

Сценарий страницы: 

<script>
    export default {
        name: "user-projects",
        data() {
            return {
                projects: null
            }
        },
        mounted() {
            this.getUserProject()
        },

        methods: {
            getUserProject() {
                this.$store.dispatch('getUserProjects', {
                    limit: 2
                }).then(response => {
                    this.projects = response.data.data;
                })
            }
        },
    }
</script>

Мой router.js 

import Homepage from '../views/frontend/HomepageView';
import ProjectDetails from '../views/frontend/ProjectDetailsView';
import LoginView from '../views/frontend/LoginView';
import RegisterView from '../views/frontend/RegisterView';
import DashboardIndexView from '../views/dashboard/DashboardIndexView';

export const routes = [
    {
        path: '',
        name: 'homepage',
        component: Homepage
    },
    {
        path: '/login',
        name: 'frontend-login',
        component: LoginView
    },
    {
        path: '/projects/:slug',
        name: 'projects.show',
        component: ProjectDetails
    },
    {
        path: '/register',
        name: 'frontend-register',
        component: RegisterView
    },
    {
        path: '/dashboard',
        name: 'dashboard-index',
        component: DashboardIndexView
    }
];

Я не понимаю, где моя ошибка: /

Ответы [ 3 ]

0 голосов
/ 18 января 2019

Благодаря Джому, проблема заключалась в том, что мой "слаг" был пуст, и действительно, когда я смотрел на консоль, там было предупреждение. 

[vue-router] missing param for named route "projects.show": Expected "slug" to be defined
0 голосов
/ 18 января 2019

Вы можете проверить, не является ли slug пустым, перед рендерингом ссылки на маршрутизатор, как показано ниже: 

<router-link v-if="project.slug" to="{ name: 'projects.show', params: { slug: project.slug }}">
    <h4>{‌{ project.title}}</h4>
</router-link>

Но я уверен, почему slug пуст.

0 голосов
/ 18 января 2019

Ваш подход неверен. router-link - это компонент, который отображает элемент a. Проверьте официальный источник: https://router.vuejs.org/api/#router-link. Первый, работает, но тоже не так. Вы должны поставить tag='li' в router-link. Второй вариант никогда не будет работать, потому что VueJS отбросит тег h4. Чтобы заставить это работать, чередуйте что-то вроде: 

<h4>
 <router-link :to='<your-params>'>{{ project.title }}</router-link>
</h4>
...