I have the following code in my template:
<router-link to="/page1">Go to Page1</router-link>
Vue part:
const Page1 = { template: '<div>Hello Page1</div>' }
const routes = [
{ path: '/page1', component: Page1 },
]
const router = new VueRouter({
routes
})
var app = new Vue({
router,
el: '#app',
}).$mount('#app')
I want the Page1 component to be a HTML page like page1.html instead of "Hello Page1". Should I have
<router-view> </router-view>
on page1.html? How can I do that?
I don't quite understand your question. You are using Vue Router, which integrates with Vue's way of building Single Page Applications. Yet, you want to show a normal html page instead?
Related
My first day with Vue. I initialized my app. I want to add a Login component, when I set routes in main.js, no page works.
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Login from './components/Login.vue'
const routes = [
{ path: '/', component: App },
{ path: '/login', component: Login }
]
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
router
}).$mount("#app")
Only works when I add render option to Vue object and renders the App component.
new Vue({
router,
render: h => h(App) // or Login
}).$mount("#app")
How will I ensure rendering route components?
You should add router-view component inside your App component like :
<template>
<div>
<router-view></router-view>
</div>
</template>
I have an App component and it renders fine. It's basically a component comprising two components.
App (Vue component):
1. Navigation // a menu bar with menu items
//like <router-link to="/">Home</router-link>
//like <router-link to="/contact">Contact</router-link>
2. Library // a component listing books.
I want to add another component Contact which I tried adding using vue-router, so I use the above navigation component. However, the routes don't seem to affect anything at all. What am I doing wrong?
My main.js file
const Contact = {
template: '<div>Contact Us</div>'
}
const routes = [
{
path: '/',
component: App // any change here also does not make any difference!!!
},
{
path: '/contact',
component: Contact, // this or any component doesnt make any difference!!!
}
];
const router = new VueRouter({
routes,
});
new Vue({
render: h => h(App),
router,
}).$mount('#app')
How to change Vuetify tabs together with vue-router
I use vuetify tabs and router see eg. How to use Vuetify tabs with vue-router
In this sample exist two child component Foo and Bar.
I would like to change active tab and route from Foo or Bar component .
This is simplified example. I have the standard Vue structure (main.js, App.vue, Foo.Vue, Bar.vue)
I can change only router via this.$router.replace
Thanks.
JS
const Foo = {
template: '<div>Foo component!</div>'
};
const Bar = {
template: '<div>Bar component!</div>'
};
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
];
const router = new VueRouter({ routes });
new Vue({
el: '#app',
router,
});
HTML
<v-app dark>
<v-tabs fixed-tabs>
<v-tab to="/foo">Foo</v-tab>
<v-tab to="/bar">Bar</v-tab>
</v-tabs>
<router-view></router-view>
</v-app>
Add the replace directive to your v-tab:
<v-tab to="/foo" replace>Foo</v-tab>
The key is in the question you linked:v-tab is a wrapper for router-link. Adding the replace prop to a router-link tells it to call router.replace() instead of router.push() (from the API Reference).
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 have an app built with Vue.js. In this app, I'm using the Vue Router. I successfully have top-level routes working. However, I'm unable to get child routes to work. My code seems to ignore any routes defined within the children property of a route. I've setup the problem in this fiddle. The relevant code looks like this:
const CustomerMenu = { template: '<div><br />please choose: <router-link to="/customers/list">list</router-link> <router-link to="/customers/stats">stats</router-link></div>' }
const CustomerList = { template: '<div>A list of customers here</div>' };
const CustomerStats = { template: '<div>Customer statistics</div>' };
const Suppliers = { template: '<div>Suppliers</div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/customers', component: CustomerMenu, children: [
{ path: 'list', component: CustomerList },
{ path: 'stats', component: CustomerStats }
]},
{ path: '/suppliers', component: Suppliers }
]
})
new Vue({
router,
el: '#app',
data: {}
});
How do I show the content associated with a route defined in the children property of a route. In other words, how do I get the "list" or "stats" components to appear when a user selects there respective links?
Thank you!
You were missing <router-view/> inside your CustomerMenu component.
http://jsfiddle.net/sn5vu6ek/
Remember - every component which has children routes has to have to be able to display children components.
If you just want to have some part of path common between components, you can either create parent with just <router-view/> inside, or specify full path for multiple components.