mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-30 09:27:13 +00:00
Replace router-link to nuxt-link
This commit is contained in:
parent
36f3d48ece
commit
0142dae008
@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>{{ userAgent }}</p>
|
||||
<p><router-link to="/post">See a post (http request / Ajax)</router-link></p>
|
||||
<p><nuxt-link to="/post">See a post (http request / Ajax)</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>{{ post.title }}!</p>
|
||||
<p><router-link to="/">Back home</router-link></p>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -183,7 +183,7 @@ Let's add a `/secret` route where only the connected user can see its content:
|
||||
<template>
|
||||
<div>
|
||||
<h1>Super secret page</h1>
|
||||
<router-link to="/">Back to the home page</router-link>
|
||||
<nuxt-link to="/">Back to the home page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
||||
<p><i>You can also refresh this page, you'll still be connected!</i></p>
|
||||
<button @click="logout">Logout</button>
|
||||
</div>
|
||||
<p><router-link to="/secret">Super secret page</router-link></p>
|
||||
<p><nuxt-link to="/secret">Super secret page</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<h1>Super secret page</h1>
|
||||
<p>If you try to access this URL not connected, you will be redirected to the home page (server-side or client-side)</p>
|
||||
<router-link to="/">Back to the home page</router-link>
|
||||
<nuxt-link to="/">Back to the home page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p>About Page</p>
|
||||
<router-link to="/">Go to /</router-link>
|
||||
<nuxt-link to="/">Go to /</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p>Hello {{ name }}!</p>
|
||||
<router-link to="/about">Go to /about</router-link>
|
||||
<nuxt-link to="/about">Go to /about</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -6,24 +6,24 @@
|
||||
</h1>
|
||||
<ul class="Navbar__Links">
|
||||
<li class="Navbar__Links__Item">
|
||||
<router-link to="/team" class="Navbar__Links__Item__Link">
|
||||
<nuxt-link to="/team" class="Navbar__Links__Item__Link">
|
||||
Basic route
|
||||
</router-link>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="Navbar__Links__Item">
|
||||
<router-link to="/projects" class="Navbar__Links__Item__Link">
|
||||
<nuxt-link to="/projects" class="Navbar__Links__Item__Link">
|
||||
Dynamic routes
|
||||
</router-link>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="Navbar__Links__Item">
|
||||
<router-link to="/users" class="Navbar__Links__Item__Link">
|
||||
<nuxt-link to="/users" class="Navbar__Links__Item__Link">
|
||||
Nested routes
|
||||
</router-link>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="Navbar__Links__Item">
|
||||
<router-link to="/posts" class="Navbar__Links__Item__Link">
|
||||
<nuxt-link to="/posts" class="Navbar__Links__Item__Link">
|
||||
Dynamic nested routes
|
||||
</router-link>
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -96,6 +96,10 @@ a, a:hover
|
||||
color: #41B883;
|
||||
}
|
||||
|
||||
.nuxt-link-active {
|
||||
color: #41B883 !important;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
@ -2,9 +2,9 @@
|
||||
<div class="container">
|
||||
<h2>Posts list</h2>
|
||||
<p>
|
||||
<router-link to="/posts/welcome">
|
||||
<nuxt-link to="/posts/welcome">
|
||||
Welcome post
|
||||
</router-link>
|
||||
</nuxt-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -3,9 +3,9 @@
|
||||
<h1>Dynamic route example</h1>
|
||||
<h2>Projects list</h2>
|
||||
<p>
|
||||
<router-link :to="{ name: 'projects-slug', params: { slug: 'nuxtjs'} }">
|
||||
<nuxt-link :to="{ name: 'projects-slug', params: { slug: 'nuxtjs'} }">
|
||||
Nuxt.js
|
||||
</router-link>
|
||||
</nuxt-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -4,7 +4,7 @@
|
||||
<h2>Users list</h2>
|
||||
<ul class="users">
|
||||
<li v-for="user in users">
|
||||
<router-link :to="{ name: 'users-id', params: { id: user.id } }">{{ user.name }}</router-link>
|
||||
<nuxt-link :to="{ name: 'users-id', params: { id: user.id } }">{{ user.name }}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
<nuxt-child :key="$route.params.id"></nuxt-child>
|
||||
@ -43,7 +43,4 @@ export default {
|
||||
.users li a:hover {
|
||||
color: #41b883;
|
||||
}
|
||||
.router-link-active {
|
||||
color: #41b883 !important;
|
||||
}
|
||||
</style>
|
||||
|
@ -4,7 +4,7 @@
|
||||
<h3>{{ user.name }}</h3>
|
||||
<h4>@{{ user.username }}</h4>
|
||||
<p>Email : {{ user.email }}</p>
|
||||
<p><router-link to="/users">List of users</router-link></p>
|
||||
<p><nuxt-link to="/users">List of users</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Hi from {{ name }}</p>
|
||||
<router-link to="/">Home page</router-link>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Welcome!</h1>
|
||||
<router-link to="/about">About page</router-link>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<h1 class="title">Another Page</h1>
|
||||
<p><router-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</router-link></p>
|
||||
<p><router-link to="/">Back home</router-link></p>
|
||||
<p><nuxt-link to="/" class="button is-medium is-info hvr-wobble-vertical">Another button</nuxt-link></p>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<h1 class="title">Custom CSS!</h1>
|
||||
<p><router-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</router-link></p>
|
||||
<p><router-link to="/about">About page</router-link></p>
|
||||
<p><nuxt-link to="/about" class="button is-medium is-primary hvr-float-shadow">I am a button</nuxt-link></p>
|
||||
<p><nuxt-link to="/about">About page</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<h1>About page</h1>
|
||||
<p>Click below to see the custom meta tags added with our custom component <code>twitter-head-card</code></p>
|
||||
<twitter-head-card></twitter-head-card>
|
||||
<p><router-link to="/">Home page</router-link></p>
|
||||
<p><nuxt-link to="/">Home page</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Home page 🚀</h1>
|
||||
<router-link to="/about">About page</router-link>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Welcome!</h1>
|
||||
<router-link to="/about">About page</router-link>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<img :src="thumbnailUrl" />
|
||||
<p><router-link to="/">Home</router-link> - About</p>
|
||||
<p><nuxt-link to="/">Home</nuxt-link> - About</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p><button @click="showLoginError">Notif me!</button></p>
|
||||
<p>Home - <router-link to="/about">About</router-link></p>
|
||||
<p>Home - <nuxt-link to="/about">About</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -71,7 +71,7 @@ To define a custom transition for a specific route, simply add the `transition`
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>About page</h1>
|
||||
<router-link to="/">Home page</router-link>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>About page</h1>
|
||||
<router-link to="/">Home page</router-link>
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Home page</h1>
|
||||
<router-link to="/about">About page</router-link>
|
||||
<nuxt-link to="/about">About page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<img src="~static/nuxt-black.png" />
|
||||
<h2>Thank you for testing nuxt.js</h2>
|
||||
<p>Loaded from the {{ name }}</p>
|
||||
<p><router-link to="/">Back home</router-link></p>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="container">
|
||||
<img src="nuxt.png" />
|
||||
<h2>Hello World.</h2>
|
||||
<p><router-link to="/about">About</router-link></p>
|
||||
<p><nuxt-link to="/about">About</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<p>
|
||||
<button @click="$store.commit('increment')">{{ $store.state.counter }}</button><br>
|
||||
<router-link to="/">Home</router-link>
|
||||
<nuxt-link to="/">Home</nuxt-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<p>
|
||||
<button @click="increment">{{ counter }}</button><br>
|
||||
<router-link to="/about">About</router-link>
|
||||
<nuxt-link to="/about">About</nuxt-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<div class="error-wrapper-message">
|
||||
<h2 class="error-message">{{ error.message }}</h2>
|
||||
</div>
|
||||
<p v-if="error.statusCode === 404"><router-link class="error-link" to="/">Back to the home page</router-link></p>
|
||||
<p v-if="error.statusCode === 404"><nuxt-link class="error-link" to="/">Back to the home page</nuxt-link></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -39,8 +39,7 @@ class Nuxt {
|
||||
},
|
||||
router: {
|
||||
base: '/',
|
||||
linkActiveClass: 'router-link-active',
|
||||
routes: {}
|
||||
linkActiveClass: 'nuxt-link-active'
|
||||
},
|
||||
build: {}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user