Блог

Главная - Вопросы по программированию - Как получить ссылки Vuejs для переключения между компонентами?

Как получить ссылки Vuejs для переключения между компонентами?

#javascript #vue.js

#javascript #vue.js

Вопрос:

Чтобы упростить демонстрацию, я использую поддельный / бессмысленный API) У меня есть маршрутизаторы

 const routes = [ 
  { path: '/',  component: Menu}, 
  {path: '/books', component: Index,
    props: route => ({ api:  `https://jsonplaceholder.typicode.com/posts` })
  },
  {path: '/videos',component: Index,
    props: route => ({ api:  `https://jsonplaceholder.typicode.com/todos` })
  }
]
const router = new VueRouter({ routes })
const app = new Vue({ router }).$mount('#app')

Компонент меню

 var Menu = Vue.component('Menu', {
    template: `<ul> 
    <li><router-link to="/">home</router-link></li>
    <li><router-link :to="{ name: 'videos'}">videos</router-link></li>
    <li><router-link :to="{ name: 'books'}">books</router-link></li>
    </ul>`})

В этом проблема, он не переключается с видео на книги.

Наконец, индексный компонент

 var BookComponent = {
      props: {
        api: { type: String }
      },
    data: function () {
      return {
        items: null, 
      }
    },
    mounted: function(){
        this.getItems()
    },
    methods: {
        async getItems() {
            fetch(this.api).then(res => res.json())
            .then(res =>{ 
                this.items = res;
                this.loading = false
            })
        }, 
    },
    template: `
    <div class="home">
        <p v-for="post in items" :key="post.id">{{post.title}}</p>
    </div>
    `
} 
var Home = Vue.component('Home', BookComponent) 

var Index = {
  props: {
    api: {type: String,},
    filterBy: {type: String},
  },
  template: `
    <div>   
        <Menu />
        <div class="mainApp"  style="margin-top: 40px!important">
            <Home :api=api />
        </div>
     </div>`,
  component: { Menu, Home },
};

Это не работает на jsfiddle, но в любом случае вот код jsfiddle

Ответ №1:

Вы вызываете именованные маршруты, но вы не определили никакого имени в своих маршрутах, поэтому либо используйте путь

   <li><router-link to="/videos">videos</router-link></li>
  <li><router-link to="/books">books</router-link></li>

или назовите свои маршруты

 const routes = [ 
  { path: '/',  component: Menu}, 
  {path: '/books', component: Index, name: 'books',
    props: route => ({ api:  `https://jsonplaceholder.typicode.com/posts` })
  },
  {path: '/videos',component: Index, name: 'videos',
    props: route => ({ api:  `https://jsonplaceholder.typicode.com/todos` })
  }
]

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

1. Это ничего не изменило!

2. Не могли бы вы проверить значение href сгенерированной ссылки <a> ?

3. Я просто попытался отобразить {{api}} просто, чтобы посмотреть, изменится ли он, и это работает! Итак, ты должен решить проблему. mounted это ничего не регистрирует при изменении URL

Ответ №2:

  1. Чтобы исправить навигацию — замените объекты в router-link атрибуте to на to='/videos' и to='/books'
  2. Чтобы исправить ошибку рендеринга, добавьте v-if в цикл post items, например:
     <div class="home">
        <p v-if="items" v-for="post in items" :key="post.id">{{post.title}}</p>
    </div>

Вот официальные документы для vue-router

Ответ №3:

Кажется, мне просто нужно было следить за изменениями маршрута и снова запускать метод выборки.

     watch: {
        // call again the method if the route changes
        '$route': 'getItems'
    }