Having trouble using VueJS (first time using it)
I have 90% of my page template in the index.html file in doc root
I have 3 components (each contains the main content body for each 'page')
My router:
export default new Router({
mode: 'history',
hash: false,
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/gallery',
name: 'Gallery',
component: Gallery
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
})
I can't get <router-link :to="{ name: 'Gallery' }">Gallery</router-link> to work - my site doesn't render them as anchor tags in my index.html (I'm probably not understanding how/where Vue can be used there) - so I'm using a standard link e.g. <a class="nav-link" href="/gallery">Gallery</a>
The problem:
While all of this code works fine on my local machine, it doesn't work anywhere that I upload my code to (I would like to have it working on Netlify). Netlify and other sites overwrite my attempts to remove the hash, so my links then link to e.g.
https://examplesite.com/#/ => https://examplesite.com/gallery#/
hash is not a Router option. Try removing this.
To use history mode on Netlify, you have to add a _redirects file to your public directory.
Add this to the file:
/* / 200
This will make sure that all paths are handled by the vue-router
Related
I have a JS object like so
[
{
name: 'About',
path: '/about'
},
{
name: 'Profile',
path: '/profile'
},
{
name: 'Users',
path: '/users'
}
]
Is there any way for me to link the paths in this object to the pages I have in my pages folder
I tried using the Link component and passing it as prop. This handles the navigation but when the page is refreshed it redirects to the 404 page
Go into your next.config.js file and add this:
module.exports = {
trailingSlash: true,
}
That should fix this issue of 404 when refreshing. As for passing a prop to Link component, that's fine as it is.
Here's a next.js explanation as reference.
guys. I have a shop page with two params: page and sort. like below:
example.com/shop/
example.com/shop/page/2/
example.com/shop/sort/newest/
example.com/shop/sort/oldest/page/2/
this is my route configs:
router: {
extendRoutes(routes, resolve) {
routes.push(
{
path: '/shop/sort/:sort/page/:page(\\d+)',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-sort-page',
},
{
path: '/shop/sort/:sort',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-sort',
},
{
path: '/shop/page/:page(\\d+)',
component: resolve(__dirname, 'pages/shop/index.vue'),
name: 'shop-page',
},
)
}
},
Now, after i generate my website, Nuxt doesn't generate sort pages. when i go to /sort/ or /sort/oldest/page/2/ it returns 404.
what do I need to do?
if I need to generate all these pages by myself, then what are these routes.push() used for?
I also want to add "name" and "filter" params. you see generating a dynamic route for all these parameters is impossible. what can I do?
thanks.
Im using Nuxt 2, by official doc, you need to add route for each parameter https://nuxtjs.org/docs/configuration-glossary/configuration-generate/#routes
For workaround solution, I may create a redirect page for dynamic page and url is
example.com/shop/redirect?page=2&sort=newest
In redirect page:
mounted(){
const p_page= this.$route.query.page
const p_sort = this.$route.query.sort
this.$router.push(`/shop/sort/${p_sort}/page/${p_page}`)
}
I want to structure my router.js file as currently there is around 500 lines of code in it.
{
path: "/",
component: () => import("./../src/views/dashboard/Dashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
{
path: "/regionWiseDashboard",
component: () => import("./../src/views/dashboard/RegionWiseDashboard.vue"),
meta: {
auth: true,
title: "Dashboard"
}
},
The above code is repeating for every component I include in my project which just makes the code look more and more unreadable. Can I structure it anyhow? Maybe put all files in an JSON or divide the main js file into children js files?
How I structured my routes in vue.
First: create a folder named routes, inside this folder, create subfolders depends on how you group your routes. Example, villages, dashboard, user
Second: create a main route inside your routes folder. This main route will hold and import all your routes made in villages, dashboard, user.
last: import this main route to your main app.js
I have a static single page application in the landing directory which has the following files and works simply by opening the index.html file in the browser.
The directory has the following files and directories:
index.html
contactform
css
img
js
lib
I also have a vuejs application with the following directories and files in the build dist directory:
css
favicon.ico
fonts
img
index.html
js
And the following router.js:
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'login',
component: () => import(/* webpackChunkName: "home" */ './views/Login.vue'),
},
{
path: '/manager',
name: 'manager',
component: () => import(/* webpackChunkName: "manager" */ './views/manager.vue'),
},
{
path: '/staff',
name: 'staff',
component: () =>
import(/* webpackChunkName: "staff" */ './views/staff.vue'),
},
],
});
The login page is just a login form which automatically redirects to one of the other pages depending on the user type.
Here is my vue.config.js:
module.exports = {
publicPath: './',
};
I want to deploy this do S3.
Here is what I tried:
I upload the content of landing directory to S3, I put a link like login in the index.html of static website and I created a directory called login there and put the content of dist directoy in it. the static website loads fine but the vuejs application doesn't. when I click on login the addressbad changes to url/login but the page just reloads. Any thoughts?
i am very new to vue.js and electron. I am trying to render a page with some javascript.
So i have these .vue files or components. these can contain only one script tag as far as i know. So whenever i add anything to the script. the application breaks and shows me a directory which shows me files
this is how the application apears if i don't modify the script in dashboard.vue
this is how it apears if i change anything in the script of dashboard.vue
The dashboard does not contain any script for now. But when i add a script tag this problem occurs.
my dashboard script is
<script>
export default {
name : 'Dashboard',
data(){
return {
msg : "Welcome"
}
}
}
</script>
This is how the router is configured . It works fine if i don't have a script tag in dashboard.vue
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Dashboard',
component: require('#/components/Dashboard').default
},
{
path: '/Products',
name: 'Products',
component: require('#/components/Products').default
},
{
path: '*',
redirect: '/'
}
]
})
I want to know why this error occurs. and i need to run some script when dashboard is loaded from vue router. I have tried looking up this issue. i can't find anything. I am not that familiar with webpack and vue-loader either. Though i have went through the documentation.