Как включить компоненты в vue. js?

Question

Когда я открываю любой URL, я всегда вижу UsersList.vue компонент. Почему? Потому что я включаю его в App.vue? Если я изменил его на <router-view/>, я всегда вижу пустую страницу. Как я могу это исправить? И как я могу совершить переход с ListView на DetailView через router-link

index. js

import Vue from 'vue'
import Router from 'vue-router'

import UsersList from '@/components/UsersList'
import UserDetail from '@/components/UserDetail'

Vue.use(Router)


export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/users/',
      name: 'UsersList',
      component: UsersList
    },
    {
      path: '/user/:id',
      name: 'user_detail',
      component: UserDetail
    }
  ]
})

main. js

Vue.use(VueResource)
Vue.use(VueAxios)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Приложение. vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

UsersList. vue

<template>
  <div>
      <tr v-for="user in usersList" :key="user.id">
        <td><router-link :to="{name:'user_detail',params:{id:user.id}}">{{ user.id }}</router-link></td>
      </tr>
  </div>
</template>

<script>
export default {
  name: 'UsersList',
  data() {
    return {
      usersList: []
    };
  },
  mounted() {
    this.$axios
      .get('http://127.0.0.1:8000/api/v1/users/')
      .then(response => (
        this.usersList = response.data.results
      ));
  }
}

Answer 1

Вы должны импортировать свои компоненты (UserList и UserDetail) в файл конфигурации маршрутизатора (index.js). После этого вы сможете использовать <router-view>

Какой URL вы хотите получить? Вы должны добавить base в свой маршрутизатор:

export default new Router({
  mode: 'history',
  base:'/users',
  routes: [
    {
      path: '/users/',
      name: 'UsersList',
      component: UsersList
    },
    {
      path: '/user/:id',
      name: 'user_detail',
      component: UserDetail
    }
  ]
})