I am trying to accomplish something that I am not sure is possible or semantically good. I am building out a personal portfolio website and I liked the idea of a full page navigation where each link transitions into a 90% view and the router view loads in that space(See codepen below for transition example). I've stripped out the main router-view from my codesandbox. I am wondering maybe I need named router views?
Another thing I'd like to know is if I could keep the html semantic at all if I basically inject a main tag directing after a nav link? There has to be a better way than how I am doing this. I just need to step back and look at it differently.
CodeSandBox Portfolio:
CodePen Tester for Navigation Transition (I will probably do this a different way using Vue transition components)
See the Pen Portfolio Nav Tester by CJ Haviland (#cjhaviland) on CodePen.
Related
I'm building a Nuxt app with a layout that consists of 3/4 main content and 1/4 sidebar navigation that uses tabs that expand based on the current route.
My aim is to essentially have two router-views — one on the main page and one in each tab.
With the Vue Router I guess this would be possible to achieve via named views e.g.
<router-view name="rightSidebar"></router-view>
But obviously with Nuxt the idea is that the routing is taken care of behind the scenes...so it isn't possible to configure.
But none the less is it possible to use <NuxtPage /> in this way?
Nuxt.js does not support the router-view. However, you can use the NuxtPage inbuilt component. Just remember that it only works after the pages you are trying to nest have been added in the pages directory.
Here is a link to an overview of it from the Nuxt docs.
I would like to ask when do you use dynamic components instead of vue router? Is it good to use dynamic components instead of vue router? I'm referring more to child routes. Let's say we have an app and we have several nav elements. For instance 'About', 'Cases', 'Services', 'Contact' and if we go to each of them there are a few more options displayed. Let's say if we go to 'About' then we have 'Team', 'What we do', 'Our mission' something like that displayed in that page. Other ones have extra links inside as well. So these could be used as child nav or could be loaded as a dynamic component. What would be advantages and disadvantages to use one over another?
With routing you can link to pages easily and refresh them. As dynamic components linking to them would be more difficult and refreshing would revert the component to default state.
In your case I would use routing but you have to weigh the usefulness case by case. Would someone want to link to yourpage/about/team? You can also consider fitting them all to single page and using anchors yourpage/about#team. I imagine crawlers won't be able to access views behind button clicks either, only links.
I am not pretty sure if in web development this kind of thing is called as a 'bookmark' layout. I'll explain on below screen.
I would like to achieve something like this and missing a knowledge of how to do that. Could someone point me where should I anchore ? I could not find anything in web / probably looking with using bad phrases.
This component would be part of the application, after we push to the router path it's going to display this kind of layout. Basically I could achieve this buy keep pushing a different route for each page, but what if those pages belongs to "one model comoponent" I wouldn't like to reload them all of the time while switching them, just once after we entry to each. It would work like a tab bar in mobile apps (iOS).
In many UI contexts (e.g. browsers, macOS applications, etc.) and in Web Development, what you refer to as "bookmark layout" is simply called tabs (like the iOS tab bar that you also mention).
I wouldn't like to reload them all of the time while switching them
Vue offers you the built-in component <keep-alive> for such use case:
When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them.
See the Vue guide: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
When switching between these components though, you’ll sometimes want to maintain their state or avoid re-rendering for performance reasons. […]
To solve this problem, we can wrap our dynamic component with a <keep-alive> element
Vuetify has a pretty flexible layout scheme encompassing a menu, toolbar, content, and footer, that allows some nice-looking material design schemes, e.g. Google Contacts:
Consider a standard setup with the layout being controlled by the router, with a fixed menu across the site, but a dynamic toolbar that changes with the page shown. What's the best practice for changing the content of the toolbar depending on what page is shown? In the Google Contacts example, we only want the search bar to show up on the Contacts page.
Based on my rudimentary knowledge of Vue, it seems like defining a router layout with a scoped slot. There are likely a lot of other hacky ways to achieve this. But I'm looking for a clean, modular way to define toolbar content across pages.
Ideas:
As of a while ago vue-router didn't support named slots. But this seems to have changed recently, although there is no documentation.
Named views seem to be a nice way to support tie the toolbar content to the main page with vue-router. But there doesn't seem to be a good way for the toolbar to 'talk' to the main page as there would be with a slot.
You can define multiple router views in your application. Imagine your layout looks extremely simplified like this:
<v-app id="app">
<router-view name="navigation"></router-view>
<router-view></router-view>
</v-app>
Then you can define a route with components for both router views:
{
path: '/hello',
components: {
default: MyHelloComponent,
navigation: MyNavigationForHelloComponent
}
}
Documentation
Working Example from Documentation
I have a website consisting of a Sitemap like this:
Home
About
Golf
-- Course one
-- Course two
Work
-- Work one
-- Work two
Contact
So Work.vue is laid out like this
<header></header>
<carousel></carousel>
<work-one</work-one>
<work-two></work-two>
<footer></footer>
My question in my main navigation above if I click the sub navigation item Work two how I then go to the Work page and scroll to the Work two component or even better if the work two component would load first and the work one component would load under it.
Really hope I am making sense but basically I want to be able to link to specific parts of a vue Page component which contains other components also.
Thanks
If I understand you correctly, this doesn't really have much to do with Vue or Vue router as it does simple html.
You can use anchor tags for this (http://www.echoecho.com/htmllinks08.htm):
Simply put, in each components html have something like
<a name="work-one"></a>
Then, when you want to link to that specific component on that page, you can do:
Link Text
Or the Vue Router way:
<router-link to="yoursite.com/your-main-page-link#work-one">Link Text</router-link>