проблема при реализации Vue Router-Link - PullRequest
Новая
       3

проблема при реализации Vue Router-Link

2 голосов
/ 20 сентября 2019

Я установил vue router в своем проекте И я хочу использовать router-link> для перехода на некоторые страницы, но он не работает

У меня есть компонент navbar, в котором у меня две кнопки login и signUp, поэтому, когда пользователь нажимает на кнопку входа, я хочу, чтобы маршрутизатор направлял его на страницу входа так же, как для регистрации для регистрации страницы

в моем компоненте navbar Я делаю это 

    <template>
           <div class="buttons">
            <router-link :to="{name: 'PageRegister'}" class="btn btn-primary">
              <strong>Sign up</strong>
            </router-link>
            <router-link :to="{name: 'PageLogin'}" class="btn btn-secondary">
             <strong>Login</strong>
            </router-link>
          </div>
</template>

<script>
  export default {
  }
</script>

<style scoped>
</style>

И выполнение маршрутизации в файле index.js, который находится внутри router folder

import Vue from 'vue'
import VueRouter from 'vue-router'

import pageHome from '../pages/PageHome'
import PageMeetupDetail from '../pages/PageMeetupDetail'
import PageLogin from '../pages/PageLogin'
import PageRegister from '../pages/PageRegister'


Vue.use(VueRouter)

const router = new VueRouter({
    routes: [{
            path: '/login',
            name: 'PageLogin',
            component: PageLogin
        },
        {
            path: '/register',
            name: 'PageRegister',
            component: PageRegister
        }
    ],
    mode: 'history'
})
export default router

И ниже мое main.js vueфайл в ту сторону, в которую я импортирую `router 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'bootstrap-vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'



new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

, вот Image of my file directory

Я не знаю, что я делаю неправильно, нопри нажатии кнопки ничего не происходит

Пожалуйста, проверьте мой каталог файлов в изображении

...