Vue.js vue-router does not return the page with the component

Question

I use Vue.js and vue-router. The problem is that when you click the button with the to = "login" parameter, the url changes to " http: // localhost: 8080 / # / login ", however, the component does not return, but the old one remains and no errors are output to the console. Those. page appearance does not change. What could be the problem? We have created two components App.vue and login.vue. The transition is carried out from the html page, its code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Игра Брейн-ринг</title> </head> <body> <div id="app"> </div> <script src="/dist/build.js"></script> <router-view></router-view> </body> </html>

Everything works through main.js:

  import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; import Login from './login.vue'; Vue.use(VueRouter); const router = new VueRouter({ routes: [ { path: "#", component: App }, { path: "/login", component: Login } ] }); const app = new Vue({ router, render: function (createElement) { return createElement(App); } }).$mount('#app');

And the code of the two components. Component app.vue:

 <template> <div id="app"> <img src="./assets/brain.png"> <h1></h1> <h2>Правила игры Брейн-ринг</h2> <ul> <li>Игра начинается с...</li> <li>Вам нужно успеть дать правильный ответ первее...</li> <li>Время на ответ 30 секунд...</li> <li>Игра Брейн-ринг заканчивается...</li> </ul> <h2>Вперед!</h2> <router-link to="/login"> <div class="wrapper"> <button v-on:click="onClick" id="submit-button"><b>Начать игру</b></button> </div></router-link> </div> </template> <script> export default { name: 'app', data() { return { msg: 'Добро пожаловать в игру Брейн-ринг' } }, methods: { onClick: function() { console.log(''); } } } </script>

And the login.vue component

 <template> <div id="login"> <h2>Регистрация</h2> </div> </template> <script> export default { name: 'login', data() { return { msg: 'Welcome to Your Vue.js App' } } </script> <style> </style>

To create a project, I used the webpack-simple CLI template.

Accepted Answer · 2017-05-12T12:22:57

You have some kind of trouble with the structure - id="app" in the main file and in the component. <router-view> must be inside the <div id='app'></div> main file. IMHO in the router you need to remove #:

 routes: [ { path: "", component: App }, { path: "/login", component: Login } ]

I didn’t just know about the rules of the structure, so I freaked out too much, the changes helped, it works)

Answer 2 · 2017-05-11T23:03:29

Move the router-view in App.vue

 <template> <div id="app"> <!-- твой код --> <router-view></router-view> </div> </template>

Added <router-view></router-view> to app.vue; now it returns the app.vue component and the login.vue component when clicked.
everything remains with the app component and below the inscription "registration" from the login.vue component appears

Denis Denis eight one · Answer 3 · 2017-05-11T22:18:40

Perhaps <router-view></router-view> needs to be moved into <div id='app'></div> , or even into the app.vue component

Denis

eight one

Added <router-view></router-view> to app.vue; now it returns the app.vue component and the login.vue component when clicked. everything is left with the app component and at the bottom there appears the inscription "registration" from the login.vue component - Evgeny Shalaev

|

Evgeny Shalaev Evgeny Shalaev 413 3 14 · Answer 4 · 2017-05-12T13:04:24

In general, the problem was solved. I do not know what exactly it was, but here is the working code. index.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Игра Брейн-ринг</title> </head> <body> <div id="app"> <router-view></router-view> </div> <script src="/dist/build.js"></script> </body> </html>

main.js

 import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; import Login from './login.vue'; Vue.use(VueRouter); const router = new VueRouter({ mode: 'history', routes: [ { path: '/login', component: Login }, { path: '/', component: App } ] }); new Vue({ router }).$mount('#app');

App.vue

 <template> <div> <img src="./assets/brain.png"> <h2>Правила игры Брейн-ринг</h2> <ul> <li>Игра начинается с...</li> <li>Вам нужно успеть дать правильный ответ первее...</li> <li>Время на ответ 30 секунд...</li> <li>Игра Брейн-ринг заканчивается...</li> </ul> <h2>Вперед!</h2> <router-link to="/login"> <div class="wrapper"> <button v-on:click="onClick" id="submit-button"><b>Начать игру</b></button> </div> </router-link> </div> </template> <script> export default { name: 'app', data() { return { msg: 'Добро пожаловать в игру Брейн-ринг' } }, methods: { onClick: function() { console.log(''); } } } </script> <style> </style>

login.vue

 <template> <div> <h2>Регистрация</h2> </div> </template> <script> export default { name: 'login', data() { return { msg: 'Регистрация' } } } </script> <style> </style>

AlexeyVE AlexeyVE 31 3 · Answer 5 · 2017-05-12T13:07:14

 routes: [ { path: "/", component: App }, { path: "/login", component: Login } ]

Vue.js vue-router does not return the page with the component

5 answers 5

Protected by spirit community member ♦ 12 May '17 at 13:07 .

More articles: