I'm new and I'm very sorry because there are many page of this argument, but I'm still stuck
when I compile the page (I am using yarn), the new page is loaded but I want see modify I do press ctrl+F5
This is not a problem for me but I can’t say at all, "if you want to see modify you do press ctrl+F5" ?
this is my router code :
routes: [
{
path: '/',
name: 'home',
component: () => import('#/views/Home.vue'),
meta: {
resource: 'ACL',
pageTitle: 'Home',
breadcrumb: [
{
text: 'Home',
active: true,
},
],
},
}
How can I do it in simple code when this page is never cached ?
Sorry for my ignorant
Related
this is propably basic question to ask but i have a problem with router settings. I have managed to build a nice, clean Views inside CMS system i am working on and my router settings looks like
const routes = [{
path: "/cms/dashboard/",
redirect: "/cms/dashboard/summary/"
}, {
path: "/cms",
name: "CMS",
component: CMS,
children: [{
id: ":id",
path: ":viewSlug",
name: "cmsView",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/CmsView.vue"),
children: [{
id: ":id",
path: ":childSlug",
name: "nestedRoute",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/NestedView.vue"),
children: [{
id: ":id",
path: ":secondChildSlug",
name: "nestedSecond",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/SecondNestedView.vue"),
}]
}]
}],
}];
so as you can see i am basically using only named routes which is neat because i can design all the pages i want in CMS to be just .json files that are included in store. The problem is redirecting seems not to work properly. The code:
{
path: "/cms/dashboard/",
redirect: "/cms/dashboard/summary/"
}
Works only when i refresh the page - so when I refresh a page when i am under /cms/dashboard - redirect works just fine, but when i go to "/cms/dashboard" via navigation - nothing happens. That's a little bit frustrating because i just want to always show child component as well as main component in every view.
Given the following route:
{
path: '/detail/:someId',
component: SomeDetailComponent,
name: 'some-detail',
children: [
{
path: 'dashboard',
component: DashboardComponent,
name: 'dashboard'
},
{
path: '',
redirect: { name: 'dashboard' }
},
{
path: 'other',
component: OtherComponent,
name: 'other'
}
]
},
Why does this work (the dashboard component is visible):
this.$router.push(`/detail/123/`);
But this doesn't:
this.$router.push({name: 'some-detail', params: { someId: 123 }});
In one case, the URL gets a trailing slash while in the other it doesn't. I've read somewhere in the docs that this is a breaking change coming from Vue2. See:
named-children-routes-with-an-empty-path-no-longer-appends-a-slash
So the real question here could be: how can I still have my working child navigations (with redirection) while still being able to navigate using the route name, instead of the route url part.
I'm having problems to make my http://localhost:8080/myapps/config route load. If I use http://localhost:8080/myapps everything works ok and I get a list of my apps. But when I want to access an app config through http://localhost:8080/myapps/config it loads the content of /myapps again. However, the url in my browser shows the correct path /myapps/config.
I have been checking the routher for some hours but everything seems to be ok. Could anybody shed some light?
My router file:
import Vue from 'vue'
import Router from 'vue-router'
const MyApps = () => import('../views/app/subviews/MyApps');
const AppKeyValue = () => import('../views/app/subviews/AppKeyValue');
import MainView from '../views/app/MainView'
Vue.use(Router)
export default new Router({
mode: 'history',
routes:
[
{
path: '/',
component: MainView,
redirect: 'myapps',
children:
[
{
path: 'myapps',
component: MyApps,
meta:
{
requiresAuth: true,
breadcrumb: 'My Apps'
},
children:
[
{
path: 'config',
component: AppKeyValue,
meta:
{
requiresAuth: true,
breadcrumb: 'App configuration'
}
},
]
},
]
},
]
})
Everything works ok if I don't use child routes:
export default new Router({
mode: 'history',
routes:
[
{
path: '/',
component: MainView,
redirect: 'myapps',
children:
[
{
path: 'myapps',
component: MyApps,
meta:
{
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'My Apps'
},
},
{
path: 'myapps/config',
component: AppKeyValue,
meta:
{
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'App configuration'
}
}
]
}
]}
You didn't post your *.vue components, but I assume you're missing <router-view> in the second level component.
Example:
MainView is mapped to / and has 1 children route (/myapps). You're probably using <router-view> in your MainView.
MyApps is mapped to myapps as a children of the /-route and has 1 children route (/config).
Add a <router-view to your MyApps.vue to let it display its children (which is just /config in your case).
Similarly, a rendered component can also contain its own, nested <router-view>.
https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes
BTW: That's also why your second router config is working: The main route has two children (/myapps and /myapps/config), which both get displayed by the MainView's <router-view>.
Here is a working example from the documentation:
https://jsfiddle.net/nazgul_mamasheva/zrcLe9z7/1/
I'm trying to match a Vue.js route like so:
{
path: '/#/reset*',
name: 'Confirm Reset Password',
meta: { title: `Confirm password reset` },
component: ConfirmResetPassword
},
to a URL that looks like this
mywebsite.com/#/reset-password
but it's not working- it just goes to the home page for some reason. Am I doing the wildcard wrong or is the '#' in a reserved namespace?
I also have these two routes:
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: '404',
meta: { title: `Page not found` },
component: Error404
}
**Edit
I have history mode on and the URL is generated from a Django back-end
The /# shouldn't be a part of the path. Use like below:
{
path: '/reset*',
name: 'Confirm Reset Password',
meta: { title: `Confirm password reset` },
component: ConfirmResetPassword
},
The fact that you have /# in your URLs is because you don't have History mode on (which is not a problem, it is just a different way of using vue-router). So you declare your paths without /#.
If history mode is on I can't match against a URL provided pre-fixed with '#' - solution is to change the URL being generated on the back-end.
I'm trying to have a homepage with tabs containing 2 lists, with 1 open by default.
I have the following route config, I've changed the names to simplify
let routes = [{
path: '/',
name: 'home',
component: require('./views/Home.vue'),
children: [{
path: 'list1',
name: 'home.list1',
component: require('./views/List1.vue')
}, {
path: 'list2',
name: 'home.list2',
component: require('./views/List2.vue')
}]
}
Inside ./views/Home.vue I have a <router-view></router-view> below 2 <router-link>s for each tab (child route).
When I visit the app route http://domain/ I would like to activate the list1 tab. The only way I can currently do this is if I visit http://domain/list1.
I have tried
children: [{
path: '',
name: 'home.list1'
and this initially works well, however if I visit http://domain/list2 both my tab links (router-links) have the active state.
JSFiddle which I can't get to run but helps for context
Is there a better solution to this?
Add one more child route with redirect (should be first)
children: [{
path: '',
redirect: 'list1', // default child path
},
...
]
For making a component(tab) appear default at visiting the parent route, you need to add a path as '' (empty string)
The following is a n example from the Vue Router docs
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },
// ...other sub routes
]
}
]
})
Don't use a '/', it will be considered as the root route.
You need to put the redirect on the parent, and it works on the first load.
Otherwise, it only works when I reload the page.
put redirect: 'home.list1' on the parent
put your child as path: ''
hope it works.
let routes = [{
path: '/',
name: 'home',
redirect: {name: 'home.list1'}, // Redirect to named route
// redirect '/list2' // Or redirect to path
component: require('./views/Home.vue'),
children: [{
path: '',
name: 'home.list1',
component: require('./views/List1.vue')
}, {
path: 'list2',
name: 'home.list2',
component: require('./views/List2.vue')
}]
}
I think what you want to do works if your home route isn't "/"
routes: [
{ path: '/home',
name: 'home',
component: require('./views/home.vue')
children: [
{ path: '/', name: 'list1', component: list1 },
{ path: 'list2', name: 'list2', component: list2},
],
}
]
This will load the home component and the list1 component inside of your initial . Then you can user router link to nav to list2:
<router-link :to="{ name: 'list2', params: { ...}}">
Or, maybe I don't understand the question.
Here is what works.
You have to use redirect: {name: 'home.list1'} (for the named route) property on your parent route 'home'.
Make sure you use the correct redirect property format either for named route (as above) or for path: redirect: '/list1'.
Here is the correct routes config which is only 1 line (the redirect one) different vs your config:
let routes = [{
path: '/',
name: 'home',
redirect: 'home.list1',
component: require('./views/Home.vue'),
children: [{
path: 'list1',
name: 'home.list1',
component: require('./views/List1.vue')
}, {
path: 'list2',
name: 'home.list2',
component: require('./views/List2.vue')
}]
}
Then every visit to / (your 'home' route) would be redirected to /list1.
Moreover, the router-link-active and router-link-exact-active will be correctly assigned on child link (both of them) and on parent link (only router-link-active).
This will also work for deeper nested non-child and child routes.
For more redirect & aliasig options see the official docs.