Is it possible to access the specific router link without going through the root?
I have an app with router below:
export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/faq',
name: 'faq',
component: () => import(/* webpackChunkName: "faq" */ './views/Faq.vue')
},
]
})
If I go to www.example.com, then click on /about link, I can go to www.example.com/about page. but if I type www.example.com/about directly, I will get 404 page not found. I understand that is because without going through the root page, the rest of the js file is not loaded yet.
But is there a way for me directly access the page without going through the main page?
Related
I'm doing multilingual functionality based on locale params and this is the route I've configured:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/:locale',
name: 'Home',
component: Home
},
{
path: '/about:locale',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/recruit/:locale',
name: 'Recruit',
component: () => import(/* webpackChunkName: "Recruit" */ '../views/Recruit/index.vue'),
},
{
path: '/detail/:id/:locale',
name: 'Detail',
// props: (route) => ({ id: route.params.id }),
component: () => import(/* webpackChunkName: "Detail" */ '../views/Recruit/Detail.vue'),
},
]
And it throws an error that if when on home page and params locale is empty valid(/) instead of /en or /fr,... then when I redirect to another page the URL bar is completely blank and there is no any path.
This is my redirected router-link:
<router-link
class="nav-link rttr"
:to="{ name: 'Recruit'}"
>
Recruit
</router-link>
So is there a way when I redirect and the router params has no value (/) the path in the URL bar will still display correctly or not?
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.
In deep routing pattern nested route changing without a problem, but when I go to parent and come back to the nested child via redirect from the parent. The redirect is not applied smoothly. Path is changing clearly, but page is still displays the last visited nested route. And when I check the vue devtool. I see that redirected route being inactive but last visited is being active.
export default [
{
path: '/1/',
name: 'sumaipad',
component: () => import(/* webpackChunkName: "group-sumaipad" */ './views/index.vue'),
redirect:"/1/slideshow",
children: [
{
path:"/1/vista",
name: "vista",
meta: {
order: 1
},
component: () => import(/* webpackChunkName: "group-sumaipad" */ './views/vista.vue'),
},
{
path: '/1/plans',
name: 'plans',
component: () => import(/* webpackChunkName: "group-sumaipad" */ './views/plans.vue'),
redirect:{name:"rooms"},
meta:{
order: 2,
},
children:[
{
path: 'rooms',
name: 'rooms',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/rooms.vue'),
children:[
{
path: ':id',
name: 'room',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/room.vue'),
}
]
},
{
path: 'land',
name: 'land',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/land.vue'),
},
{
path: 'floor',
name: 'floor',
component: () => import(/* webpackChunkName: "group-plans" */ './views/plans/floor.vue'),
},
]
},
]
}
]
For example when I go to plans it redirected to the rooms without a problem and after that I visit it's sibling which is land route and I turn back to parent level's route vista again.
THEN if go the plans I would expect to redirect me to rooms AND its actually is redirect me. The path is changing but content is being land in nested level. Because I visited it lastly. So even if its redirecting me to rooms, the rooms route is being inactive in vue devtools.
Is there a way to change the active and inactive route about last visited after the redirect?
I'm trying to put a router that is imported as a constant in main router`s children
router/components/slider/index.js:
const sliderRouter = {
path: '/slider',
name: 'Slider',
meta: {
title: 'Slider'
},
component: () => import('#/views/components/slider'),
}
export default sliderRouter
router/index.js:
...
import authRouter from './modules/auth'
import sliderRouter from './modules/components/slider'
...
export default new Router({
mode: 'history',
linkActiveClass: "active selected",
routes: [
authRouter, // this work
{
path: '/admin',
name: 'primary',
meta: { requiresAuth: true },
// remastered version
component: loadView('MainLayout'),
children: [
sliderRouter, /* make something like this */
//recent routes
{
path: '/home',
name: 'home',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// classic version:
component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
// component: About
}
]
},
Is it really possible to make the slider router work in such way and inherit from the MainLayout (like a typical child), and also URL would be '/admin/slider'?
I solved it by changing the path in the slider
path: '/slider',
to
path: 'slider',
because it is using like child route which does not require a slash before it`s name
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/