I'm using vueRouter on the site, but I ran into a problem. If I want to click between hashes, scrollBehavior doesn't work for me.
if you click on the Bio page on "noubtest.com" and try to go to "services" only the url will change but you won't get to the correct section in the Bio.
https://noubtest.com/home -> https://noubtest.com/home#fifthPage
Navigation
<router-link v-show="!mobile" class="link bio" :to="{ name: 'Home', hash: '#firstPage' }">Bio</router-link>
<router-link v-show="!mobile" class="link link2" :to="{ name: 'Home', hash: '#fifthPage' }">Services</router-link>
Router - index.js
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/home",
name: "Home",
component: Home,
meta: {
title: "Bio",
requiresAuth: false,
},
},
const router = new VueRouter({
mode: "history",
routes,
scrollBehavior() {
return { x: 0, y: 0 };
},
});
I'm a newbie, could you please guide me on how to fix this? so that I can move between sections on one page using the menu?
I also use the fullpage.js module on the website (but it probably won't be a problem)
Related
So I recently wanted to try and learn vuejs, so I used the CLI to create my project and to setup vue-router. Now, with the default vue router configuration the URL's show as /#/ and /#/about. However, in my configuration file I set the paths as / and /About. As I want the URL's to be like that, does anyone know how I can do this?
router > index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () =>
import('../views/Home.vue'),
meta: { title: 'Home', description: 'Foo bar.' }
},
{
path: '/About',
name: 'About',
component: () =>
import('../views/About.vue'),
meta: { title: 'About', description: 'Lorem ipsum.' }
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
EDIT:
Okay, so I found that the best way to fix this in VueJS v3 is to just switch out createWebHashHistory with createWebHistory, it's literally that simple. After you've switched your imports and the createRouter object, it should all be working fine! 🥳
On a specific UI action I'm calling:
router.push({ name: router.history.current.name, params: { league: league } })
I just want to add "/:league" param at the end of the route. I have a separate route for it:
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home, name: 'home' },
{ path: '/:league', component: Home, props: true, name: 'home/league' },
]
})
For example if the user is at / and he selects a "league" from a menu, I want the url to change to /leagueName.
It works, but it appends # at the end of the url and it ends up being /leagueName#. Is there a way to remove the hash? I'm already in "history" mode.
I found several bugs:
Check how your router is connected and configured:
const routes = [
{ path: '/', name: 'Home', component: Home },
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
You need to write $router, when you call a push.
You can't write a name like router.history.current.name, because you will go to the same page. So state explicitly: home/league.
Better not use one component to output different routes, this is not very good. But you can use child routes.
Instead of creating a separate route that points to the same component, use an optional parameter on one route:
export default new VueRouter({
mode: "history",
routes: [
{
path: "/:league?", // `?` makes `league` OPTIONAL
component: Home,
props: true,
name: "home"
}
]
});
And if you need to use $router.push() to change only the parameter value, you could omit the name or path:
<button #click="$router.push({ params: { league: 'myLeague' } })">
Go to My League
</button>
Note if the UI is intended to be a link, it might be best to use router-link, which avoids the Avoided redundant navigation to current location console warning:
<router-link :to="{ params: { league: 'myLeague' } }">Go to My League</router-link>
demo
I am using the #nuxtjs/router module for defining custom routes. Here is my router.js file
import Vue from 'vue'
import Router from 'vue-router'
import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: News,
},
{
path: '/news',
name: 'News',
component: News,
},
{
path: '/news/:tag',
name: 'TaggedNews',
component: News,
},
{
path: '/news/:id([a-f0-9]{32})/:title',
name: 'NewsItem',
component: News,
},
{
path: '/news/:tag/:id([a-f0-9]{32})/:title',
name: 'TaggedNewsItem',
component: News,
},
{
path: '/login',
component: Login,
},
{
path: '/signup',
component: Signup,
},
{
path: '/account',
component: Account,
},
],
})
}
I want to open the /login route as a modal on Desktop but page on mobile. How do I go about it?
Short answer would be you can't, as for using a modal you need to tell the app what "actual route" you are on - imagine navigating directly to /login on desktop and the issue becomes clear.
My suggestion would be to not add a route for login, but to use a query Param for whether or not the Login modal should be displayed:
query Param would be handled by a LoginModal component on the app root
closing/opening would both trigger and be managed by changes to the query parameter
On mobile, the modal can be styled as a full screen block.
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/views/Home.vue'
import Load from '#/views/Load.vue'
import Login from '#/views/Login.vue'
import Main from '#/views/Main.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Home
},
{
path: '/load',
name: 'loading',
component: Load
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/main',
name: 'main',
component: Main
}]
})
I connected the router correctly.
But https://sh031224.github.io/portfolio/ the inside of '#app' is empty.
How can I do?
My github is https://github.com/Sh031224/portfolio
And github page is https://sh031224.github.io/portfolio/
You need to set base in your router configuration to "/portfolio/"
See the docs
I am building an app using Vue Router that uses an "external" site for login credentials. It essentially looks like this:
Home.Vue
<template>
</template>
<script>
export default {
name: "Home",
data() {
return {
}
},
created() {
window.location = 'https://third_party_site.com?nextpage=http://my_site.com/#/entry'
}
}
</script>
<style scoped>
</style>
This third_party_site.com handles auth and sends a JWT back as a query string in the resulting URL. When I try to use a navigation guard (as shown below) to get the query string, Vue router only looks in the router's history.
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import Entry from '#/components/Entry'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/entry',
name: 'Entry',
component: Entry,
beforeEnter: (to, from, next) => {
console.log('to',to)
console.log('from',from)
console.log('next',next)
next()
},
meta: {
title: 'Entry'
}
},
]
})
The console prints the expected "to" location but the "from" location is the base path, "/", and there are no query parameters. How do I go about getting the "external" route so I can access the query parameters? The resulting console.log of "from" is below.
from
{name: null, meta: {…}, path: "/", hash: "", query: {…}, …}
fullPath: "/"
hash: ""
matched: []
meta: {}
name: null
params: {}
path: "/"
query: {}
__proto__: Object
Before asking, the app, in its current state, has to be built this way and I do not have access to the external site.
Wild shot in the dark here but the # in your nextpage query parameter is probably messing with the remote site.
What it will see is
QUERY => nextpage=http://my_site.com/
FRAGMENT => #/entry
so it will redirect back to http://my_site.com/ because it probably ignores any fragment.
You should encode the value correctly, eg
window.location = 'https://third_party_site.com/?nextpage=' +
encodeURIComponent('http://my_site.com/#/entry')
which will produce nextpage=http%3A%2F%2Fmy_site.com%2F%23%2Fentry