This issue has been discussed several times (1 - 2) but I still cannot get it to work. I'm transitioning our project to use vue in some parts. What I want to accomplish is:
If url starts with /v/, look into vue router and match path.
If url starts with anything other than /v/, ignore it (this view will be rendered by current framework from backend).
My router looks like:
const router = new Router({
base: '/v/',
mode: 'history',
routes: routes
});
Where routes are:
const routers = [
...
{
path: '/wholesale-catalogue/',
name: 'wholesale-catalogue',
component: () => import('./views/WholesaleCatalogue.vue')
}
...
]
The second option I tried is nesting the children routes:
const router = new Router({
mode: 'history',
routes: [
{ path: 'v', component: BaseView, children: routers }
]
});
The problem is that the router reroutes non /v/ urls into /v/ when clicked within the website, such as:
ourwebsite.com/home/ -> has some links on it, such as /about/. When you click on /about/ it actually goes to ourwebsite.com/about/ for a few seconds but then the url changes to /ourwebsite.com/v/about/. This leads to some annoyances as when you refresh the website, this url doesn't exist (on our current backend framework) so it will not render.
Related
I'm working on a Vue.Js site and using the Vue-router default mode "hash". So the site URL is something like that:
www.mysite.com/#/Home
This site is already being linked by some mobile apps, and I can't change them. But I have a new requirement and I need to change the URLs to remove the hash (#) from the URL. So I changed the Vue-router mode to "history" and now my site is working without the hash. Like that:
www.mysite.com/Home
The problem is that using the history mode the URL with the hash (#) doesn't work. But for compatibility with the mobile apps that link the site with hash, I still need to make the URL with the hash works.
QUESTION:
How can I use the Vue-router history mode and also keep the URLs with hash working?
I tried the following way at the router/index.js file:
export default new Router({
mode: 'history',
routes: [
{
path: '/Home',
name: 'Home1',
component: Home
},
{
path: '/#/Home',
name: 'Home2',
component: Home
},
...
]})
Using this configuration the URL www.mysite.com/Home works, but the URL www.mysite.com/#/Home doesn't work.
I'm answering my own question based on the comment of the #Ohgodwhy and a question/answer from the vue.js forum that was answered by #nathany.
The solution is to remove the has (#) from the URLs that have the hash, and redirecting it to the URL without the hash. It can be done at the method router.beforeEach().
My router/index.js was something like that:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
export default new Router({
mode: 'history',
routes: [
{
path: '/Home',
name: 'Home',
component: Home
},
],
})
Then I changed to:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
var router = new Router({
mode: 'history',
routes: [
{
path: '/Home',
name: 'Home',
component: Home
},
],
})
export default router;
router.beforeEach((to, from, next) => {
// Redirect if fullPath begins with a hash (ignore hashes later in path)
if (to.fullPath.substr(0,2) === "/#") {
const path = to.fullPath.substr(2);
next(path);
return;
}
next();
});
For me I just needed to route external legacy links to current history-mode.
In App.vue mounted:
if (location.hash) {
location.replace(location.hash.replace('#', ''))
}
If you stumble across this...
The currently accepted answer works... But if you have a id link in the root path (for example, /#learn-more), the router redirects to /learn-more and would return a 404.
So, I modified the beforeEach route guard to:
router.beforeEach((to, _from, next) => {
if (to.hash.startsWith('#/')) {
const path = to.fullPath.substring(2);
next(path);
return;
}
next();
});
Why? In hash mode, links are passed as hashes
// console.log(to)
{
fullPath: "/#/contact",
path: "/",
hash: "#/contact",
...
}
...while normal id links (in history mode) give
{
fullPath: "/about#learn-more",
hash: "#learn-more",
path: "/about",
...
}
Looking at hash, the difference between a link to an id and a hash-mode link is #/
I'm working with my site at https://mtgranks.herokuapp.com/.
If you use the navigation options that appear when you click Sets and select the Dominaria option, the site properly navigates to https://mtgranks.herokuapp.com/DOM and loads the expected data.
The problem I am running into is if I type https://mtgranks.herokuapp.com/DOM and try to directly navigate to it through the URL, the site will return a 404.
Below is my basic Router, please let me know if you'd like to see any other areas.
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '',
name: 'home',
component: Home,
},
{
// TODO: Limit available URLs people can type in.
path: '/:set',
name: 'set',
component: Set
},
]
})
i'm making static site with laravel and vue.js. I make
Route::get('/', function () {
return view('layouts.master');
});
this route enter code hereto load home page and
import VueRouter from 'vue-router'
import home from './components/home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/about', component: About },
{
path: '/',
component: home
},
{
path: '/contact',
component: Contact
}
]
const router = new VueRouter({
mode: 'history',
routes, // short for `routes: routes`,
})
its my appp.js code. First time when page loaded on localhost:8000 the home page works fine but when i click to somme other route and come back it does not work it shows me blank page . but i can see html page by inspecting.
It sounds like history mode is not configured correctly on the server side.
As a test, change this:
const router = new VueRouter({
mode: 'history',
routes, // short for `routes: routes`,
})
...to this:
const router = new VueRouter({
//mode: 'history',
routes, // short for `routes: routes`,
})
If it works, it means your server side is not set up properly for Vue History Mode and you'll need to configure your server side to allow for history mode.
Example 1
Example 2 - scroll down a little more than half way to "The Server-Side" section
I am trying to dynamically pass in data to set the base for vue-router. Is it possible to setup a separate function elsewhere that passes in a base name variable? For example, if an editor wanted to set the base name via a CMS, I’d want a way to pass (or import) that name through.
// router/index.js
export default new VueRouter({
base: '[PASS BASE NAME HERE]',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
],
mode: 'history'
})
I ended up setting a variable on my index.html and importing it to the router. This can also be done by importing a variable from a module js file, but setting it on the html seems to avoid build issues. Simpler solution than I thought, thanks #lamelemon.
// index.html
var serializedModel = #Html.Raw(Model.Serialized());
// router/index.js
var baseUrl = serializedModel.BaseUrl;
export default new VueRouter({
base: baseUrl,
mode: 'history',
routes: [{...}]
})
For some reason my vue-router breaks links.
For example, when I setup <router-link to="/user/bar">... I've got this in url:
/http:/siteexample.com/user/bar
this should be http:// instead /http:/
So, why urls are not formatted properly?
My routes example:
var routes = [
{path : '/user/', component: Network},
{path : '/user/foo', component: Foo},
{path : '/user/bar', component: Bar},
{path : '*', component: Notfound}
];
var router = new VueRouter({
mode: 'history',
routes: routes
});
UPD:
Actually its ok, but problem was - my urls becomes like that: http://siteexample.com/http:/siteexample.com/user/bar
I've replaced this line in vue-router.js
pushState(cleanPath(this$1.base + route.fullPath))
to
pushState(cleanPath(route.fullPath))
in
https://github.com/vuejs/vue-router/blob/dev/dist/vue-router.js#L1682-L1690
And now all works fine, but I'm not sure - is this is a bug or not.
The problem was - <base href="/"> tag in head.
Remove it and all will be fine.