[英]How to proper use vue-router?
I want to exclude the h1
tag every time I go to different route in my Vue application. 每当我在Vue应用程序中转到其他路线时,我都希望排除
h1
标签。
Here's my app.vue
: 这是我的
app.vue
:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<h1>LANDING PAGE</h1>
<router-view></router-view>
<!--Path for login.vue-->
<button @click="$router.push('/login')">LOGIN</button>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
And here's my login page, where I want only to display my design for login page only : 这是我的登录页面,在这里我只想显示我只登录页面设计:
<template>
<div>
<h1>Login Page</h1>
</div>
</template>
<script>
export default {
name: "Login"
}
</script>
My route.js
: 我的
route.js
:
import Login from './components/LandingPage/Login';
import Register from './components/LandingPage/Register';
export default [
{
path: '/login', component: Login
},
{
path: '/register', component: Register
}
]
and lastly my main.js
: 最后是我的
main.js
:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes';
import VueResource from 'vue-resource'
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(VueResource);
const router = new VueRouter({
routes: Routes,
/* To remove # in the URL */
mode: 'history'
});
new Vue({
render: h => h(App),
router: router
}).$mount('#app');
I didn't include the register.vue
because it's just the same with login.vue
. 我没有包含
register.vue
因为它与login.vue
相同。
基于目标网页网址的条件渲染:
<h1 v-if="$route.path === '/landing-page-url'">LANDING PAGE</h1>
Actually, there are three approaches to solve your problem: 实际上,有三种方法可以解决您的问题:
<h1></h1>
into your landing page component. <h1></h1>
放到目标网页组件中即可。 path
to name
): <h1 v-if="$route.name === 'Landing'">Landing page</h1>
name
path
): <h1 v-if="$route.name === 'Landing'">Landing page</h1>
<h1></h1>
in your main layout, and render current page title dynamically. <h1></h1>
,并动态呈现当前页面标题。 Route Meta Fields come in rescue. import Login from './components/LandingPage/Login'
import Register from './components/LandingPage/Register'
export default [
{
path: '/login',
component: Login,
meta: {
title: 'Login',
},
},
{
path: '/register',
component: Register,
meta: {
title: 'Register',
},
},
]
And then in your template
: 然后在您的
template
:
<h1>{{ $route.meta.title }}</h1>
PS To navigate to another route in your template use <router-link></router-link>
instead of button
with click
event. PS要导航到模板中的另一条路线,请使用
<router-link></router-link>
而不是带有click
事件的button
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.