每次我在 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
是一样的。
最佳答案
基于着陆页 url 的条件呈现:
<h1 v-if="$route.path === '/landing-page-url'">LANDING PAGE</h1>
关于vue.js - 如何正确使用vue-router?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57415465/