This is my router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
import Login from '../views/Login'
Vue.use(Router)
export default new Router({
//mode: 'hash',
routes: [
{
path: '/',
component: Home
},
{
path: '/login',
component: Login
},
]
})
And this is my login view
<template>
<div class="page">
<p>
Login
</p>
</div>
</template>
<script>
export default {
components: { }
}
</script>
But anywhere I browse to, http://127.0.0.1:4000/login http://127.0.0.1:4000/home http://127.0.0.1:4000/asdasdf it renders the home template, what am I missing?
this is my app.js
import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import App from './components/App'
import router from './router'
import store from './store'
sync(store, router)
const app = new Vue({
router,
store,
...App
})
export { app, router, store }
I run the dev server with
npm run dev
If I modify the home template I see the changes, but the routing doesnt seem to work to /login or other views.
Add the <router-view></router-view> in your main component (App.vue):
<template>
<!-- html elements of the App.vue page -->
<!-- router component -->
<router-view></router-view>
</template>
And specify history mode in your router:
export default new Router({
mode: 'history',
routes: [
...
Related
Experimenting with vue-router, when i click on <router-link to="/about">Go to About</router-link> it doesnt redirect me to anywhere so for example: if i was on localhost:8080/#/ and i click the Go to About button, i still remain on localhost:8080/#/. Also if i change the url directly to localhost:8080/#/about nothing happens (ie no change to the website as if i am still on localhost:8080/#/)
The code:
/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/about',
component: () => {
import ('../views/About.vue');
}
}
]
const router = new VueRouter({
routes
})
export default router;
./App.vue
<template>
<div>
<div id='nav'>
<router-link to="/about">Go to Foo</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
//
},
data: () => ({
//
}),
};
</script>
./views/About.vue
<template>
<p>Testing out vue-routes</p>
</template>
./main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';
Vue.config.productionTip = false;
new Vue({
vuetify,
store,
router,
render: h => h(App)
}).$mount('#app')
I tried running the following code. it gave no error on serving. (I am also using vuetify and vuex but i dont think that is the problem?)
EDIT
I have edited the code such that it works by creating another vue app and using the default that vue has provided with but i cant seem to understand why the edited code works and why the previous code ^^ above didnt. It seems like the reason was that the default localhost:8080/#/ needs to have its own route in ./App.vue as well and is not there by default? can someone confirm this (can't seem to find something like this explanation online?)
Revised working code:
./App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
./views/Home.vue
<template>
<h1>This is the home page</h1>
</template>
<script>
export default {
name: 'Home',
components: {
//
},
data: () => ({
//
}),
};
</script>
./main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';
Vue.config.productionTip = false;
new Vue({
vuetify,
store,
router,
render: h => h(App)
}).$mount('#app')
./router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import("../views/About.vue")
}
];
const router = new VueRouter({
routes
})
export default router;
./views/About.vue
<template>
<p>Testing out vue-routes</p>
</template>
You need to have a <router-view/> where the routes are going to resolve.
You can read more about it here: documentation
I'm setting up a new Vue.js + Vue Router app and when I click on the router links set up in the App.vue, the content isn't showing up. The router and app objects are well defined, I've tried printing them. The app in the index.html is working since I can see the Bootstrap navbar.
Only the content of my views isn't showing up.
Main.js
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Vue from 'vue';
import app from './App.vue';
import router from './router';
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
new Vue({
render: (h) => h(app),
router,
}).$mount('#app');
router.js
import Vue from 'vue';
import Router from 'vue-router';
import Companies from './views/Companies.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/Companies',
name: 'Companies',
component: Companies,
},
],
});
Companies.vue
<template>
<div id="a">
abcde
</div>
</template>
<script>
export default {
name: 'Companies',
};
</script>
Edit : Ok that was the missing router view in app.vue! thanks
I'm sure i'm doing something stupid, but i just can't get this to work.
I defined routes in a separate js file, imported that into a newly created router, that i mounted in vue.
In the vue devtools i do see my named routes, but where the RouterView is in the vue devtools, the html shows
Routes.js:
import Home from '#/Views/Home.vue';
import NewProefwerk from '#/Views/NewProefwerk.vue';
const routes = [
{
path: '/',
name: 'home',
Component: Home
},
{
path: '/Nieuw',
name: 'new',
Component: NewProefwerk
}
];
export default routes;
main.js:
import VueRouter from 'vue-router';
import routes from '#/Routes'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: '/',
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app');
App.vue:
<template>
<div id="app">
<Navigation></Navigation>
<router-view></router-view>
</div>
</template>
<script>
import Navigation from '#/components/Navigation.vue';
export default {
name: 'app',
components: {
Navigation
}
};
</script>
Try to change Component to component.
This is my setting:
main.js creates a vue and attaches the component App to an element in the dom
router.js sets the routs
App.vue has the router-view and a few router-links
Problem:
the link <router-link to="/admin">Admin1</router-link> works fine
the link <router-link to="{name: 'admin'}">Admin2</router-link> doesn;t work and adds to the url bar: #/{name: 'admin'}
Am I using the router in the wrong way?
Below my files in details
main.js
import Vue from 'vue'
import router from './router'
import App from './App'
new Vue({
router,
el: '#app',
components: { App },
template: '<App/>',
data: {
}
})
router.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Marketplace from '#/components/Marketplace'
import Admin from '#/components/Admin'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/marketplace',
name: 'marketplace',
component: Marketplace
},
{
path: '/admin',
name: 'admin',
component: Admin
}
]
})
App.vue
<template>
<div id="app">
<p>
<router-link to="/">Home</router-link>
<router-link to="/admin">Admin1</router-link>
<router-link to="{name: 'admin'}">Admin2</router-link>
</p>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
In order for your to="{name: admin}" to work without adding the char #, do the following inside your router config file.
Also you are supposed to use the v-bind for to="".
Use v-bind:to="{name: 'admin'}" or :to="{name: 'admin'}"
Example:
export default new Router({
mode: 'history',
// whatever you have
})
Source: https://router.vuejs.org/en/essentials/history-mode.html
I'm learning Vue, and started of with the webpack template. The first thing I'm trying to do is to add support for Vue Router, but I've spent several hours on it now without being able to render a single route (I always end up with a blank page). Frustrating!
I simply want to have a single .vue file, acting as the layout file, into which different .vue files, acting as "pages", are rendered into. Can someone tell me how to do this, please? Here's my latest failed attempt:
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/Home'
import About from './components/About'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const app = new Vue({
router: new VueRouter({
routes
}),
component: App
}).$mount('#app')
App.vue (the layout file)
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/">Go to Foo</router-link>
<router-link to="/about">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
components/About.vue (almost identical to components/Home.vue)
<template>
<div>
<h1>About</h1>
<p>This is the about page!</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
I finally got it to work. The main.js file should be written like this:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './pages/Home'
import About from './pages/About'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
template: '<App />',
components: {
App
}
}).$mount('#app')
I hope this saves hours of trouble for someone else.
EDIT
The following:
const app = new Vue({
router,
template: '<App />',
components: {
App
}
}).$mount('#app')
can preferably be replaced with:
const app = new Vue({
router,
render: function(createElement){
return createElement(App)
}
}).$mount('#app')
I found out how to get main.js to call the index.js file in folder router and work with the routes defined there:
I had created my app via the VUE UI (with VUE 3.1 and CLI/3)
In the VUE UI there is an option to add plugins. I chose the router plugin (route) and it asked if I want to install a new route or install the framework. (You first need to install the framework...)
It then changed my main.js file to have the following: (the additions are marked with comments)
import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router' // added by router plugin
Vue.config.productionTip = false
new Vue({
router, // added by router plugin
render: h => h(App)
}).$mount('#app')
It also added a new folder router and in it index.js with the code
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Hello from '#/components/HelloWorld' // #pashute: I added this later...
Vue.use(VueRouter)
const routes = [
// {
// path: '/',
// name: 'Hello',
// component: Hello
// }
]
// eslint-disable-next-line no-new
const router = new VueRouter({
routes
})
export default router
It also installed the latest router package and added a link in the HelloWorld component to the router documentation.
By the way, notice the extra name: in the route definitions.