I am just getting started with Vue. I installed #Vue/Cli (that's version 3) and also cli-init so I can use version 2's commands. To create my project I used vue init webpack .
While running the app on the browser I noticed strange behaviour;
my routes are being changed!
Initial Route "localhost:8080/"
Navigating to the route url changes to "localhost:8080/#/"
Also with another route "localhost:8080/about"
Navigating to this route the url changes to "localhost:8080/about#/"
I don't understand what is going on. It renders the components though, but the url just changes.
Here is my routes config:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
path: '/about',
name: 'AboutComponent',
component: AboutComponent,
},
{
path: '*',
name: '404',
component: HelloWorld,
},
],
});
No router links, I navigated by typing the paths.
My router setting is default.
You can probably answer the question yourself by reading vue-router documentation here (https://router.vuejs.org/guide/essentials/history-mode.html)
By default vue-router works in hash mode. Routes are changed in the browser with a 'hash' for compatibility with old browsers. Nowadays you can safely use history mode, and your URLs won't change in the browser location box.
However, I recommend that you read and fully understand how client-side routing works and what's the required server-side configuration you need to make your app work properly.
Welcome to Vue.JS!
Related
I am trying to figure out how to open a Vuetify dialog using the Vue router.
The vue-router is a new experience for me so still learning it. But Ive been working on this all day and have not come anywhere close to solving the issue.
Issue: I need to update the v-model to true to open the dialog when a router link is clicked
I have tried using meta tags and the beforerouterupdate() method to try and update the v-model but that has not worked.
This is my current route file
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/backup',
name: 'backup',
component: BackupDialog,
children: [
{
path: '/backup/:options',
name: 'optionsModal',
component: DbBackupOptions,
meta: {
showModal: true
}
},
]
},
]
I am not sure I have the right configuration at this point. I also tried using dynamic routing but I could not figure that out either.
Is there some one that can give me some insight on how to resolve this issue or pointers in the right direction ?
I have figured out the issue mostly to the help of a video I found on Youtube.
Vue Router Based Modal
This is similar to a lot of questions asked re: setting up Vue Router with an Express server using the connect-history-api-fallback middleware as directed in the Vue Router docs, but I’m still running into two issues:
When I refresh any page, I am redirected to my Home route (e.g. http://localhost:8080/451)
When I enter a direct link in the address bar (e.g. http://localhost:8080/451/alerts), I am also redirected to my Home route
I am not receiving a “Cannot GET /” error, so I am pretty confident that connect-history-api-fallback is implemented correctly.
For context, this is what my router looks like:
const router = new VueRouter({
base: __dirname,
mode: 'history',
routes: [
{
component: Home,
name: 'home',
path: '/:siteId',
},
{
component: SuperAdmin,
name: 'super-admin',
path: '/:siteId/super-admin',
},
{
component: Alerts,
name: 'alerts',
path: '/:siteId/alerts',
},
{
component: LPRAdmin,
name: 'lpr-admin',
path: '/:siteId/lpr-admin',
},
{
component: ControlCenterAdmin,
name: 'control-center-admin',
path: '/:siteId/control-center-admin',
},
],
});
And this is my configuration in the server:
const staticFileMiddleware = express.static('build/public');
app.use(staticFileMiddleware);
app.use(history({
verbose: true,
}));
app.use(staticFileMiddleware);
Has anyone dealt with and solved this or a similar issue? Thanks in advance!
For anyone who comes across this in the future, we were able to solve it! Somewhat embarrassingly, we forgot we were rerouting users to the home page after authentication every time the app mounted. We removed
this.$router.push(`/${siteId}`);
from our App.js and the issues are resolved!
I have a portfolio site portfolio.com and a subdomain which points to a VueJS frontend hosted on Netlify vuejsapp.portfolio.com
Users upload files to the app and it generates a download link URL, say vuejsapp.portfolio.com/download/048677a. When I navigate to the link within the VueJS app (by clicking a button to redirect after it's uploaded) it redirects to the Download component without issue. But if I copy and paste that link directly in my browser it throws a 404 error. Why is this?
I know it has to do with a Vue Router configuration but I can't seem to find much information about it or perhaps I'm looking in the wrong place. Could someone tell me what I'm missing or point me to some relevant documentation please?
My router.js file:
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About
},
{
path: "/download/:id",
name: "download",
component: Download,
props: route => ({ id: route.params.id }),
}
]
});
Since the code/setup is running properly on your local environment and only breaking on Netlify its pretty clear that you're running into a wrong server configuration issue.
Your Netlify environment has to know that it should always route any requests to / and leave the routing to your Vue App. You can read more about how to resolve that in the Netlify docs.
I am using Vue("vue": "^2.5.2") to make a SPA,this is my route("vue-router": "^3.0.1"):
routes: [
{
path: '/',
name: 'Home',
component: Home
}]
when I request : http://localhost:8080.It could open the page.But when I tweak the route like this:
routes: [
{
path: '/home',
name: 'Home',
component: Home
}]
And I request : http://localhost:8080/home .It could not open the page.Why would this happen ,how to fix it?
As stated in the vue router docs:
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
You should find your page at http://localhost:8080/#/home
You can read more about this here
I used vue create to create a new view project with Babel, TypeScript, Router and Unit Testing. I then installed axios using npm.
Having done no other changes, I served the application by navigating to the src directory and running vue serve.
The resulting boilerplate application fails to load with the following error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
found in
---> at App.vue
My own research shows that this error usually happens when you fail to call Vue.Use(). However, my router.ts file does so:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({ routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
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'),
}, ], });
Does anyone know what is wrong here? Given I haven't changed anything, could it be a config issue?
I got it!
The issue was that I was running the server the wrong way. I was using:
vue serve src/App.vue
when I should have used:
npm run serve
After that change, it started to work.
You don't need to navigate to the src folder, just navigate to the root directory of your application, then run npm run serve.