I don't know why, but vue stops working, in the html doesn't appear the router-view and it appears like a comment:
I have the standard code with webpack, and always works, but now now.
import router from './router/index'
new Vue({
router,
el: '#app',
store,
mixins: [Vue2Filters.mixin],
components: {
TopMenuComponent,
EventItemComponent,
GoTopComponent,
},
i18n
}).$mount('#app')
router
export default new VueRouter({
routes: [
// AUTH ROUTES //
{
path: '/',
name: 'Login',
component: LoginPageComponent
},
...
The curiosity is that in the local machine it works fine, but when I put exactly the same code in another server, doesn't work. Any ideas?
EDIT:
The JS console is blank, no errors, no warnings
Related
Say in my router.js I have something like this:
const routes = [
{
path: '/',
name: 'home',
label: 'Start',
component: Home
}
]
Then where I render my router link, I'd like to be able to use the alternate label property declared above, instead of manually entering it, and to avoid defining it somewhere else. I tried the bit below but it does not work (it works for the 'path' property though)
<router-link :to="{name: 'home'}">{{ this.$router.label }}</router-link>
EDIT: I found that (obviously!) this.$router refers to the current, active route.
For now at least, this is my solution:
In router.js (or /router/index.js in my case) declare the routes with labels as indicated in the original question. And export both the routes and the router object.
const routes = [
{
path: '/',
name: 'home',
label: 'Start',
component: Home
}
...
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export { router as default, routes };
In main.js import both variables and store routes in a way you can retrieve them anywhere.
import router, { routes } from '#/router'
Vue.prototype.routes = routes
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
Where you want to "render" the route links (in my case a navbar layout), do this (using vuetify here):
<v-app-bar app color="secondary" dark>
<v-btn v-for="route in routes" :to="{name: route.name}" key='route.name' text rounded :exact="true">
{{ route.label }}
</v-btn>
</v-app-bar>
I'm sure this can be improved probably using Vuex (which I'm still studying about).
UPDATE
Found a much better solution, that don't require the routes export/import and its assignment to Vue.prototype.routes = routes. Simply do this in the component where you want to use the routes data with labels and all. The template piece (v-btn etc) remains the same.
<script>
export default {
name: 'LayoutNav',
data() {
return {
routes: this.$router.options.routes
};
}
};
</script>
I have tried to access to others pages via url, but those pages never loads
http://localhost:8080/index
http://localhost:8080/about
This is my main.js file
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Index from './views/Index';
const About = { template: '<p>about page</p>' }
const routes = [
{ path: '/index', name: 'index', component: Index },
{ path: '/about', name: 'about', component: About }
]
var router = new VueRouter({
routes: routes,
mode: 'history'
})
new Vue({
router: router,
vuetify,
render: h => h(App)
}).$mount('#app')
Does anyone can help me with vue-router? i am new in this framework
Does it work if you access them like this:
http://localhost:8080/#/about
If yes, your vue-router is working in the default hash-mode. To get rid of the hash and get "normal" URLs you'll need to set it to history mode.
Edit:
As I see you're already using history mode. Do you use Vue CLI for local development? This should normally work out of the box. If not, you need to setup some redirect rules on other web servers. Please see the examples here: Example Server Configurations
Edit 2:
Can you show your App component?
I tried to reproduce your problem in a sandbox, but it works: https://codesandbox.io/s/confident-voice-zyg07
The App component here looks like this, including the router-view:
<template>
<div id="app">
<router-view id="page"/>
</div>
</template>
<script>
export default {
name: "App",
components: {}
};
</script>
I am using vue.js version 2.5.13 installed with the vue-cli using the webpack-template.
Now I would like to use the generated App.vue-template for all my public pages and another template AdminApp.vue for all my admin-routes.
My router/index.js is like this:
import Vue from 'vue'
import Router from 'vue-router'
import LandingPage from '#/components/LandingPage'
import AdminDashboard from '#/components/admin/AdminDashboard'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'LandingPage',
component: LandingPage
},{
path: '/admin/dashboard ',
name: 'AdminDashboard',
component: AdminDashboard
}
}
My main.js is like this:
import Vue from 'vue';
import App from './App.vue';
import AdminApp from './AdminApp.vue';
import router from './router';
if (window.location.href.includes('/admin/')) {
new Vue({
el: '#app',
router,
components: {AdminApp},
template: '<AdminApp/>'
});
} else {
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
});
}
Now if I go to localhost:8080/#/ and then via url to localhost:8080/#/admin/dashboard the admin-panel does not use the AdminApp.vue-Template but the App.vue-Template. If I refresh this page, it works.
Do you know why? Are there some best practices for using two or more different templates for different routes?
In Brief:
You should make your layouts.For example layout1 & layout2.
Then you should define them as global component in your main.js and finally use them with v-if in your app.vue depends on your condition.
With Detail:
first in router/index.js:
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/auth/login',
name: 'login',
meta:{layout:"auth"},
component: Login
},
which first route will render with admin layout and second one render with Auth layout for example.
Now in main.js we will define layouts as component:
import Admin from './Layouts/Admin.vue'
import Auth from './Layouts/Auth.vue'
Vue.component('Admin',Admin);
Vue.component('Auth',Auth);
Then in App.vue we check meta datas that passed from routes to detect which layout needs:
<Auth v-if="this.$route.meta.layout==='auth'"/>
<Admin v-if="this.$route.meta.layout==null"/>
Ok.All thins done!
Now we have two layout.
I'm trying to integrate vue-cli with webpack template in an existing backend home-made framework. The websever is apache
I want the vue-js application to be loaded and mounted when the url example.com/vue.
When I go to this URL I can see the basic example vue-component but one second after I'm redirected to example.com/#/
Do you have any idea how to solve this and where does the problem come from?
Router.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '#/components/Hello'
Vue.use(Router)
export default new Router({
mode : 'history',
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
Main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
I had to defined my path as the following path: '/vue' in the router.js file. If vue-router does not find the route it will redirect to index.php
I'm having trouble getting my child views to render in Vue.
My main.js file looks like this
import DashboardProducts from './components/Dashboard/DashboardProducts'
import DashboardSettings from './components/Dashboard/DashboardSettings'
Vue.use(VueRouter)
Vue.use(Vuex)
const routes = [
{ path: '/activate', component: Activate },
{ path: '/dashboard/:view', component: Dashboard,
children: [
{ path: 'products', component: DashboardProducts },
{ path: 'settings', component: DashboardSettings }
]
},
{ path: '/login', component: Login },
{ path: '/account', component: UserAccount }
];
const router = new VueRouter({
routes // short for routes: routes
});
export default router;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
As you can see I have imported the components and get no errors. I have also added them as children of Dashboard and set their paths.
In my Dashboard.vue view I do this
<template>
<div>
<dashboard-nav></dashboard-nav>
<!-- Will display product and settings components -->
<router-view></router-view>
</div>
</template>
<script>
import DashboardNav from '../components/Dashboard/DashboardNav'
export default {
name: 'Dashboard',
components: {
DashboardNav
}
};
</script>
<style>
</style>
Urls are matching but no components are rendering. What am I missing?
Here is a JSFiddle of pretty much what I'm going for https://jsfiddle.net/dtac5m11/
It seems to be working fine there but I'm also using single file components in my app so it may be a little different?
Again, the issue is getting the child components to render when their routes match. Currently no components are being mounted.
UPDATE:
I am getting the DashboardProducts component to render but can't get DashboardSettings to render.
Thanks!
{ path: '/dashboard/:view', component: Dashboard,
At first, for what purpose do you add :view after dashboard path? If you are using this one for children path as a parameter, it is an issue. It is the reason, why your children component are not rendering. Because, :view is for dynamic routes. /dashboard/:view is equivalent to /dashboard/* and it means that after /dashboard there can be any route and this route will render Dashboard component. And your children paths /dashboard/products and /dashboard/settings will always match /dashboard/:view and render parent component-Dashboard.
So, in your case, your routes for children components are known. So you do not need to use :view.
More, https://router.vuejs.org/en/essentials/dynamic-matching.html.