main.js
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' //Components import Homepage from './components/Homepage.vue' import Login from './components/Login.vue' import RegistrationCompany from './components/RegistrationCompany.vue' Vue.use(VueRouter); Vue.config.productionTip = false const routes = [ { path : '/', name :'Homepage', component : Homepage }, { path : '/login', name :'login', component : Login }, { path : '/registration_company', name :'RegistrationCompany', component : RegistrationCompany }, ] const router = new VueRouter({ mode: "history", routes }) new Vue({ router, render: h => h(App), }).$mount('#app')
Homepage.vue
<template> <div class="homepage"> <h1>Home</h1> <p> <router-link to="/login">Go to Login</router-link> <router-link to="/registration_company">Go to Registration</router-link> </p> </div> </template> <script> export default { name: "Homepage", props: {}, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
App.js
<template> <div id="app"> <Homepage /> </div> </template> <script> import Homepage from "./components/Homepage.vue"; export default { name: "App", components: { Homepage, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Everything seems normal, it only worked once, but I don’t know what changes in the main js and it stopped working again
It is a simple code, in the main one I declared the routes, and in the home page I put the link tags to redirect to the components.
but none of this works, installation was done normally with npm
Advertisement
Answer
It seems that you are missing the router-view
<template> <div class="homepage"> <h1>Home</h1> <p> <router-link to="/login">Go to Login</router-link> <router-link to="/registration_company">Go to Registration</router-link> </p> <router-view /> </div> </template>