I've looked at the various other questions on Stackoverflow regarding routes not working, and none of them point to why my routes aren't working.
Here is my router:
import Vue from 'vue'
import Router from 'vue-router'
import Foo from '#/components/Forms/foo'
import Bar from '#/components/Forms/bar'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
})
Here foo:
<template id="foo">
<form name="basic-form" v-on:submit="submit">
<fieldset>
<legend>User</legend>
<ul>
<li>
<label>First Name</label>
<input v-model="firstName" name="first-name" />
</li>
</ul>
</fieldset>
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
name: 'foo',
data: function () {
return {
firstName
}
},
methods: {
submit: function (event) {
event.preventDefault()
console.log(this.$data.firstName)
}
}
}
</script>
Here is bar:
<template id="createDb">
<button v-on:click="createDb">Create Database</button>
</template>
<script>
export default {
name: 'CreateDb'
}
</script>
It's worth noting that each of these components work on their own if I set the path to the root /. Essentially, no matter what is typed in - it navigates to the root and thus will grab and use any component that is associated with the root. I'm lost as to why this is.
I friend of mine gave me the answer on twitter, adding the mode: 'history' to the router makes it work as expected, here it is updated:
export default new Router({
mode: 'history',
routes: [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
})
Related
My vuejs version is 3.
I implement both of these ways to use keep-alive in my app.
1
<template>
<div id="nav" classs="container is-max-desktop"></div>
<keep-alive>
<router-view />
</keep-alive>
</template>
<style>
#import "~bulma/css/bulma.css";
</style>
2
import { createRouter, createWebHistory } from "vue-router";
import Index from "../views/Index.vue";
import Create from "../views/Create.vue";
import Edit from "../views/Edit.vue";
const routes = [
{
name: "Index",
path: "/",
component: Index,
meta: { KeepAlive: true },
},
{
name: "Edit",
path: "/edit/:id",
component: Edit,
meta: { KeepAlive: true },
},
{
name: "Create",
path: "/create",
component: Create,
meta: { KeepAlive: true },
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
Simply, I apply many filters on my page but when I came back to that page they are gone. Help me to solve this problem. Thank you.
Keep alive caches components when dynamically switching them which will retain the data's in that particular component while switching. Use the below code for integration,
Maincomponent.vue
<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
export default {
components: { Component1, Component2 },
data() {
return {
current: 'Component1'
}
}
}
</script>
<template>
<div class="demo">
<label><input type="radio" v-model="current" value="Component1" /> A</label>
<label><input type="radio" v-model="current" value="Component2" /> B</label>
<KeepAlive>
<component :is="current"></component>
</KeepAlive>
</div>
</template>
Component1.vue
<script>
export default {
data() {
return {
count: 0
}
}
}
</script>
<template>
<div>
<p>Current component: A</p>
<span>count: {{ count }}</span>
<button #click="count++">+</button>
</div>
</template>
Component2.vue
<script>
export default {
data() {
return {
msg: ''
}
}
}
</script>
<template>
<div>
<p>Current component: B</p>
<span>Message is: {{ msg }}</span>
<input v-model="msg">
</div>
</template>
I got Vue2 app with vue-router with routings configured like that:
export default {
path: "/",
redirect: "/dashboard",
component: AdminLayout,
meta: {
requiresAuth: true
},
children: [
{
path: "/dashboard",
name: "Dashboard",
component: Dashboard
},
{
path: "/add/user",
name: "InviteUser",
component: InviteUser
},
{
path: "/groups",
name: "Groups",
component: Groups
},
...
In app, we got two different types of users - admin and normal user. Some of those routings should be accessible for both, but the problem is that user should see different layout base on its type (permission) - AdminLayout for admins and UserLayout for normal users.
Is there any way to show app which template should user see based on boolean from vuex with keeping route path?
on /dashboard admin will see dashboard with AdminLayout
on /dashboard normal user will see dashboard with UserLayout
My main routing cofig:
import Vue from "vue";
import VueRouter from "vue-router";
import SessionRoutes from "./session.js";
import AdminRoutes from "./admin.js";
import defaultRoutes from "./default";
Vue.use(VueRouter);
const routes = [AdminRoutes, SessionRoutes, defaultRoutes];
const router = new VueRouter({
mode: "history",
routes
});
export default router;
you can set a condition in the layout part on the current page for example for when you use nuxt:
<script>
export default {
layout: (ctx) => (ctx.isAdmin ? 'adminLayout' : 'userLayout'),
}
</script>
but I opine you don't use Nuxt.js and I think below solution is suitable for your question:
Using the meta-object in our route
set dynamic component on app.vue page
code for about.vue page
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import LayoutA from '../layouts/LayoutA.vue'
import LayoutB from '../layouts/LayoutB.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { layout: LayoutA }
},
{
path: '/about',
name: 'About',
component: About,
meta: { layout: LayoutB }
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router;
<!--app.vue page -->
<template>
<div id="app">
<component :is="this.$route.meta.layout || 'div'">
<router-view />
</component>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<!--about page-->
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<script>
export default {
name: "About"
};
</script>
To get a different layout working for the dashboard and all child routes your layouts have to use the router view component. I use a wrapper component to handle this in one of my projects following this approach.
Excerpt from my router config:
…
{
component: MainFrame,
name: 'main',
path: '/',
redirect: 'dashboard',
children: [
{
alias: 'dashboard',
component: Dashboard,
name: 'dashboard',
path: '', // Default child route → be equivalent to /dashboard
},
{
path: "add/user",
name: "InviteUser",
component: InviteUser
},
{
path: "groups",
name: "Groups",
component: Groups
},
],
},
…
In your MainFrame component you can wrap your layout in a dynamic component. So you can switch your layout easely based on a Vuex getter:
MainFrame.vue
<template>
<component :is="layout">
<!-- you can use slots too if you like -->
</component>
</template>
<script>
import AdminLayout from './AdminLayout'
import UserLayout from './UserLayout'
export default {
computed: {
layout() {
return this.$store.getters['isAdminUser'] ? AdminLayout : UserLayout
}
}
}
</script>
And your layouts have to use <router-view />. It works as a wrapper for all nested routes and therefore you have only one place to handle the layout for the dashboard and child pages:
AdminLayout.vue
<template>
<div class="auth-view">
<header>…</header>
<aside>…</aside>
<main>
<transition name="fade" mode="out-in">
<router-view />
</transition>
</main>
<footer>…</footer>
</div>
</template>
UserLayout.vue
<template>
<div class="guest-view">
<router-view />
</div>
</template>
EDIT:
This approach can be used for deeper nesting too. Assuming your user route should have another child routes you can solve this on the router config using a <router-view /> within a render function:
…
// Let's split down user related routes
{
component: { render: (h) => h('router-view') },
name: 'usersView',
path: 'users',
redirect: 'ListUsers',
children: [
// Show users
{
path: '', // route: /users/
name: 'ListUsers',
component: ListUsers
},
// Show a single user
{
path: ':id', // route: /users/{userId}
name: 'ViewUser',
component: ViewUser
},
// Invite new users
{
path: 'add', // route: /users/add
name: 'InviteUser',
component: InviteUser
},
]
}
…
I am studying Vue JS and I have problems with routers, I want certain content to open when writing on the page address for example "Home", and more precisely, I have a component called HomePage, I want to open this component when writing in url " Home "for example "http://localhost:8080/Home" and by default, if nothing is specified in the address, then an empty page would open
App.vue
<template>
<HomePage></HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage
}
}
</script>
Edit
App.vue
<template>
<HomePage>
<router-view />
</HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage,
}
}
</script>
Index.js
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import Rar from "./src/View/Rar";
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/Rar',
name: 'Rar',
component: Rar
}
]
})
export default router
You should specify a path inside your routes.
Steps
Your main app.vue should look like this
<div>
<navbar />
<router-view />
<footer />
</div>
</template>
make a folder router and inside an index.js (or more structured files)
It must look like this
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import AboutRoute from '#/components/routes/AboutRoute'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/about',
name: 'About',
component: AboutRoute
}
]
})
export default router
The first path is the '/home' with alias *.
if you type '/home' in the url you will go to the main page.
Also the alias: '*' means that everything you type after will redirect you to this route, unless it finds another route registered
You are missing some code from main.js.
I cannot see Vue getting initalized anywhere.
You should import router in your main.js and use .use(router) in there
App.vue
<template>
<router-view />
</template>
/router/index.js
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute.vue'
const router = new Router({
routes: [
{
path: '/home',
component: HomeRoute
}
]
})
export default router
main.js
import Vue from 'vue'
import App from "./App.vue";
import router from '#/router'
const app = Vue.createApp(App)
app.use(router)
app.mount('#app')
You can check your HomePage component. Does it has slot that you put router-view there? What if you use simple router-view without HomePage? Did you register router in your main app.js?
And if I correctly understand you, you can do something like this to manage your routes in index.js
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
name: 'HomeRoute',
component: HomeRoute
}
]
})
Read about VueRouter hooks https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
Also you can use children:
import HomeLayout from '#/layouts/HomeLayout.vue'
import HomePage from '#/views/HomePage.vue'
import HomeAbout from '#/views/HomePage.vue'
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
component: HomeLayout,
children: [
// full url will be like: localhost:8080/home
{
path: '',
name: 'Home',
component: HomePage
},
// full url will be like: localhost:8080/home/about
{
path: 'about',
name: 'HomeAbout',
component: HomeAbout
}
]
}
]
})
hi im using laravel with vuejs2
and this is my App.vue code
<template>
<div>
<Navbar></Navbar>
<Applications></Applications>
{{page_title}}
<router-view></router-view>
</div>
</template>
<script>
import Navbar from '../components/Navbar'
import Applications from '../components/Applications'
export default {
name: 'App',
components: {
Navbar, Applications
},
data: function () {
return {
page_title: 'Main',
}
}
}
</script>
every thing working so good so far ..
so in my routes.js i did this code
{ path: '/settings', component: Settings},
and in my Settings.Vue i did this code
<template>
<div>
setting components
{{page_title}}
</div>
</template>
<script>
export default {
props: ['page_title'],
name: 'Settings',
}
</script>
but i cant access page_title from the props what i want i access page_title from App.vue in Settings.vue
thanks a lot
You must pass data to <router-view>:
const Page = {
template: "<div>Title: {{page_title}}</div>",
props: ["page_title"]
};
const router = new VueRouter({
routes: [{
path: "/",
component: Page
}]
});
const app = new Vue({
router,
template: "<router-view :page_title='page_title'></router-view>",
data() {
return {
page_title: "It's magic!"
};
}
}).$mount("#app");
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router#3.1.6/dist/vue-router.min.js"></script>
<div id="app"></div>
I try to work with named routes in a Vue app.
Exactly the same setup works totally fine in an other Vue project.
If I click on a named router-link, the just disappears.
If I check the element in the browser, there is an empty comment at the place, where the section should be.
The console isn't showing any errors.
Has anyone seen something similar?
Thank's for every help!
Code:
index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '#/components/views/home';
import AskQuestion from '#/components/views/ask-question';
import AddQuestion from '#/components/views/add-question';
import CompleteQuestions from '#/components/views/complete-questions';
import Survey from '#/components/views/survey';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/ask-question',
name: 'AskQuestion',
component: AskQuestion
},
{
path: '/add-question',
name: 'AddQuestion',
component: AddQuestion
},
{
path: '/complete-questions/:surveyId',
name: 'CompleteQuestions',
component: CompleteQuestions
},
{
path: '/survey/:surveyId',
name: 'Survey',
component: Survey
}
]
});
HTML
<router-link :to="{name: 'survey', params: {surveyId: survey.id}}">
<p class="viewQuestions">View questions</p>
</router-link>
App.vue
<template>
<div id="app">
<navigation></navigation>
<router-view/>
</div>
</template>
<script>
import Navigation from '#/components/generel/navigation';
export default {
name: 'app',
components: {
Navigation
}
};
</script>
<style src="./assets/scss/_general.scss" lang="scss"></style>
in route config , set history mode and then go to your link and click that LINK , and then go check URL address bar
export default new VueRouter({
mode:'history',
......
});
for example if you click on this
<router-link :to="{ name: 'home' }"> Home </router-link>
and your rute is
{
path:'/home',
component:Home,
name:'home'
}
if your route workin well , you must see this url in browser address bar
https://localhost/home