I am a noob to vue-router. Here is my code,I want to render User compoent, when I navigate to http://localhost:8080/users
App.vue file:
<template>
<div id="app">
<h1>{{msg}}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Users.vue
<template>
<div>
<h1>xue yan</h1>
</div>
</template>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Users from './Users.vue'
Vue.use(VueRouter);
const routes = [
{path:'/users',component:Users}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
But, I can't see the Users component in my index.html,when I try to navigate to "http://localhost:8080/users".All the files come from vue-cli webpack-simple. what's more, there is no error in console.I can't tell what's wrong with it.
add history mode to your router as follows
const router = new VueRouter({
mode: 'history',
routes,
});
Without history mode on you need to add # in your search like this http://localhost:8080/#/users to make it work.
More about why history mode read the docs here
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 trying to render my vue components inside the router-view tag. But it gives me an error
TypeError: route is undefined
But I didn't use the word route in anywhere. This is my code.
App.vue
<template>
<div id="app">
<my-header></my-header>
<router-view></router-view>
<my-footer></my-footer>
</div>
</template>
outerroutes.js
import welcome from './components/welcome.vue';
import insideSystem from './components/insideSystem.vue';
import forgotPassword from './components/forgotPassword.vue';
export const routes = [
{path:'',component:welcome},
{path:'/insideSystem',component:insideSystem},
{path:'/forgotPassword',component:forgotPassword}
];
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routes} from './outerroutes';
Vue.use(VueRouter);
const router = new VueRouter({
routes,
mode:'history'
});
new Vue({
el: '#app',
routes,
render: h => h(App)
})
I'm wondering where is this route came from.
You are creating a router instance as follows;
const router = new VueRouter({
routes,
mode:'history'
});
But you should inject the router instance to router option in the root vue instance not routes
new Vue({
el: '#app',
router,
//routes, not this
render: h => h(App)
})
In outerroutes.js:
{path:'',component:welcome},
There is nothing defined. Try:
{path:'/',component:welcome},
Additionally, I'm not sure that you need the curly braces around routes in main.js at:
import {routes} from './outerroutes';
I'm trying to get my head round vue-router. I'm used to instantiating Vue like this...
vm = new Vue({
el : '#vueRoot',
data : { msg : 'hello' }
...
})
Now I'm being asked to instantiate it passing the router...
vm = new Vue({
router
}).$mount('#vueRoot');
My question is where do I put my data or methods, or whatever other Vue properties I would normally use? I see that my root Vue can have markup, with router-link elements. Am I to understand that, once I use the router, everything should be in components?
You can use your default notation:
new Vue({
el: '#app',
router,
template: '<MyApp/>',
components: { MyApp }
})
But you must have a <router-view/> Element in your template.
In your Main.js
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Overview from '../components/Overview.vue';
import Sale from '../components/Sale.vue';
Vue.use(VueRouter);
let routes = [
{path: '/home', component: Overview,name:'Overview'},
{path: '/sale', component: Sale, name:'Sale'},
];
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#vueRoot',
router,
});
In your Root View place element
<router-view></router-view>
In your links
<router-link to="/sale" class="nav-link">
<i class="nav-icon fas fa-cart-plus "></i>
<p>
Point of Sale
</p>
</router-link>
In your Views
<template>
<v-app>
{{viewTitle}}
{{viewSubtitle}}
</v-app>
</template>
<script>
export default {
data() {
return {
viewTitle:'Home',
viewSubtitle:'description',
}
},
methods: {
YourMethod_1() {
},
YourMethod_2() {
},
}
}
</script>
This is how the latest versions of Vue.js works with router
import App from './App';
import VueRouter from 'vue-router';
import {routes} from './routes';
const router = new VueRouter({
routes,
mode: "history", // you can remove this if not required
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
routes.js
export const routes = [
// your components as objects
]
App.vue
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
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.
Build A Single page app with vue 2 and vue-router 2 and vuex 2, but do not update
/src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
sync(store, router)
new Vue({
router,
store,
...App
}).$mount('#app')
/src/router/index.js
import Vue from 'vue'
import routes from './routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes
})
export default router
/src/router/routes.js
import loader from './loader'
const routes = [
{ path: '/index', name: 'index', component: (r) => require(['./../views/index.vue'], r) }
]
export default routes
/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {}
})
export default store
/src/view/index.vue
<template>
<div>
<h1>Hello index</h1>
</div>
</template>
<script>
import loader from './../../../router/loader'
export default {
name: 'index',
created () {
console.log('This is index')
}
}
</script>
/src/App.vue
<template>
<div id="app">
<router-link :to="'index'">index</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
mounted () {
console.log('Hello App')
}
}
</script>
I do not know what's wrong with the code, the <router-view> do not update when I change the route.
I think your app is not properly initialized yet. You are starting your app as follows:
new Vue({
router,
store,
...App
}).$mount('#app')
You have the spread operator ...App, which is not necessary - it is used to convert array items to function args, and not correct in this context. Instead you should use the render function as provided in webpack template :
/* eslint-disable-line no-new */
new Vue({
el: "#app",
store,
router,
render: h => h(App)
})
Also you have attempted to import loader in routes and index, which is not necessary if you are using vue-cli.
Maybe you can start with the webpack template as base and slowly add functionality one step at a time: start with route definitions and your route components, ensure that everything works, and finally add vuex.
$mount('#app') is fine, I think the problem is your routes.js
Try this instead:
import Index from './../views/index.vue'
const routes = [
{ path: '/index', name: 'index', component: Index }
]
And here is a working webpack template which is already configured vue-router and vuex properly, you can initialize this template via vue-cli, for your reference: https://github.com/CodinCat/vue-webpack-plus