In my previous Angular app I was able to open my resume in another window like such:
<a class="link popup" href="javascript:void(0);" onclick="javascipt:window.open('./../../assets/Resume_Christopher_Kade.pdf');">Resume</a>
While rewriting my website with Vue, I noted that it did not work as intended, after changing it to:
<a class="link popup" href="javascript:void(0);" v-on:click="openPdf()">Resume</a>
With openPdf() in my component's methods:
openPdf () {
javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf');
}
When clicking the link, a new page opens to the following URL:
http://localhost:8080/assets/Resume_Christopher_Kade.pdf
while showing an empty route on my screen instead of displaying the pdf in the browser's pdf viewer.
This issue might be related to the way I handle routes in Vue:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/work',
name: 'Work',
component: Work
},
{
path: '/posts',
name: 'Posts',
component: Posts
},
{ path: '*', component: Home }
]
})
Why isn't it as straightforward as in Angular? Am I missing something?
Did you figure it out?
My solution is for projects created with Vue CLI 3 running locally (I haven't built my project yet).
My issue was similar to yours. I just wanted <a> link that opened up my pdf file on a new tab but my url concatenated a single hash to my path and redirected me to my home page. And it was a surprisingly easy fix:
resume
Just a dot, forward slash, and my file name. And my file is located under root > public folder.
Relative Path Imports
When you reference a static asset using relative path (must start with
.) inside JavaScript, CSS or *.vue files, the asset will be included
into webpack's dependency graph...
https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
Assuming that you have static folder generated by default by Vue CLI you can simply put the PDF there and do it as follows <a href="./../static/file.pdf" target="_blank">.
Related
I'm having a nuxt 3 app with file routing activated. I'm having a problem where I have two routes that should render the same dynamic page.
My pages directory looks like this:
This is how I want my paths render the pages:
(1) / --> [lang]/index.vue
(2) /DE --> [lang]/index.vue
(3) /EN --> [lang]/index.vue
(4) /DE/Header --> [lang]/Header/index.vue
(5) /EN/Header --> [lang]/Header/index.vue
Routes 2 to 5 render correctly. My problem is that route 1 renders /index.vue (which is an expected behaviour), but I want it to render the content from [lang]/index.vue. At the moment I copied the content to have it synced in both index.vue files, but I want to avoid copying the whole file.
I already tried a navigateTo() inside the root index.vue, but that causes both pages to render. Also, I tried to add some router options file like that:
export default <RouterConfig>{
routes: (_routes) => [
{
name: 'index',
path: '/',
component: () => import('~/pages/[id]/index.vue'),
},
],
}
but then no child routes are working anymore.
How can I achieve that route 1 (/) renders the page under pages/[lang]/index.vue?
I have a homepage which is paginated, though when clicking "Next Page" it seems to be looking for a page named /page/1. Is there a way to paginate the index.vue page without creating a brand new page?
I've currently implemented the following on #click.
this.$router.push({
path: '/' + this.page,
query: { },
})
You can have dynamic parameters.
For example
url.com/1
url.com/2
So if your home page is index.vue, you need to create a vue file next to it for a dynamic parameter with name after an underscore, for example _id.vue
So the param after the root URL will be mapped to this page.
For more resources about file system and routing in NUXT
In my nuxt.config.js I added loading: '~/components/LoadingBar.vue'.
After deploying the site my custom page transition works, but only when the first page visited is different from the home page.
For example, if you visit this link and navigate from there to /About, or /Portfolio, you'll see my custom transition (blur effect + loading circle).
Now, click on the logo (my name, above the "Home" menu item): my custom page transition inexplicably resets to default Nuxt page transition, with the white loading bar at the very top of the page.
Not sure if that's a known bug with Nuxt.js, I can't think of anything in my code that could cause something like that. How do I fix it?
The page reloads once you click on the logo,
it seems you are using a simple <a> link instead of <nuxt-link>.
Set a name like this for your home route in router.js
{
name: 'home',
path: '/',
component: Index
}
then <nuxt-link :to="{ name: 'home' }">logo</nuxt-link>
I'm quite new to Vue and Nuxt and I built a web app. I need to show url based on city, but don't know what kind of routing is this.
I have web app under domain mydomain.com and there are pages like:
/ - for home page (mydomain.com)
/list - for list of items (mydomain.com/list)
/list/123 - item page, where 123 is id of item (mydomain.com/list/123)
What I want it is to get user's location and write it to vuex store and show urls with city prefix always, so it will look like:
/paris/ - for home page (mydomain.com/paris)
/paris/list - for list of items (mydomain.com/paris/list)
/paris/list/123 - item page, where 123 is id of item (mydomain.com/paris/list/123)
User will be able to change city using dropdown. I'm using nuxt and all url parts are used from pages, but in this case city is not the page it is kind of param. Please advice where to look.
It's achievable using vue-router. You can setup paths there like:
{
path: '/:city',
name: 'City',
component: City
},
{
path: '/:city/list',
name: 'List',
component: ListCmp
},
{
path: '/:city/list/:id',
name: 'ItemPage',
component: ItemPageCmp
},
Your template link for the ListCmp would be:
<router-link :to="{name: 'List', params: {city: 'Paris'}}">Paris</router-link>
And in your component you would access your param:
this.$route.params.city
In my Vue app, I can click a link generated by <router-link>...</router-link> and visit a page like: /site/books/00666.html.
The routing config for this is:
{
path: '/books/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
So I changed the URI in the browser (Fx57) to: /site/books/00777.html to try to display the detail information of another book. It failed with this:
Cannot get /books/00777.html
and the debugger told me something like:
Content security policy is preventing from accessing a resource from 'self'`.
I searched on CSP but can't figure out how to make this working.
Update: To reproduce the issue, I use vue init webpack test and scafolded a blank Vue app with router support.
One new router is added:
{
path: '/book/:id.html',
name: 'BookDetail',
component: BookDetail,
props: true,
}
In the default HelloWorld.vue, just add a few lines with <router-link>:
<ul>
<li><router-link :to="{name: 'BookDetail', params: {id: 12345} }">Book 1</router-link></li>
<li><router-link :to="{name: 'BookDetail', params: {id: 23456} }">Book 2</router-link></li>
</ul>
In the HelloWorld page, clicking the link above will take you to "localhost:8080/book/12345.html". Good.
Change the URI to "localhost:8080/book/23456.html". The browser prompts the same error as before.
Update 2： per hint below, I modified the URI pattern to '/books/:id' and it is working.
Further question: What shall I do if I want to add the .html suffix?