如何正确使用vue-router？

Question

每当我在Vue应用程序中转到其他路线时，我都希望排除h1标签。

这是我的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>

这是我的登录页面，在这里我只想显示我只登录页面设计：

<template>
    <div>
        <h1>Login Page</h1>
    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

我的route.js ：

import Login from './components/LandingPage/Login';
import Register from './components/LandingPage/Register';

export default [
    {
        path: '/login', component: Login
    },
    {
        path: '/register', component: Register
    }
]

最后是我的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');

我没有包含register.vue因为它与login.vue相同。

Answer 1

基于目标网页网址的条件渲染：

<h1 v-if="$route.path === '/landing-page-url'">LANDING PAGE</h1>

Answer 2

实际上，有三种方法可以解决您的问题：

1. 只需将<h1></h1>放到目标网页组件中即可。
2. 您可以使用条件渲染，例如Psidom的回答（只是更改为name path ）： <h1 v-if="$route.name === 'Landing'">Landing page</h1>
3. 您的主布局中只能有一个<h1></h1> ，并动态呈现当前页面标题。 Route Meta Fields可以救援。

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',
        },
    },
]

然后在您的template ：

<h1>{{ $route.meta.title }}</h1>

PS要导航到模板中的另一条路线，请使用<router-link></router-link>而不是带有click事件的button 。