我有两个主要页面,一个是登录/注册表单登陆,另一个是导航栏和内容 . 登录/注册后,我被重定向到/ main . 在命名路由“nav”我加载导航栏并在“con”内容加载 . 路由器链接位于navbar内部,这是独立的组件 . 现在,当我点击其中一个链接时没有任何反应,但如果我手动输入URL,它可以正常工作 . 我的猜测是,问题在于它是在组件内部 .
导航栏组件内的链接:
<router-link :to="{ name: 'forum' }">
<b-nav-item href="#" ><i class="material-icons md-36">forum</i> Forum</b-nav-item>
</router-link>
我的看法
<div id="app">
@csrf
<router-view></router-view>
<router-view class="view one" name="nav"></router-view>
<router-view class="view two" name="con"></router-view>
</div>
我的App.js有路线
import Landing from './components/LandingPage.vue'
import Home from './components/HomePage.vue'
import Navbar from './components/Navbar.vue'
import Forum from './components/Forum.vue'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Landing,
meta: {
requiresVisitor: true,
}
},
{
path: '/main',
name: 'main',
components: {
nav: Navbar,
con: Home
},
meta: {
requiresAuth: true,
}
},
{
path: '/forum',
name: 'forum',
components: {
nav: Navbar,
con: Forum
},
meta: {
requiresAuth: true,
}
}
],
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.loggedIn) {
next({
name: 'home',
})
} else {
next()
}
} else if (to.matched.some(record => record.meta.requiresVisitor)) {
if (store.getters.loggedIn) {
next({
name: 'main',
})
} else {
next()
}
} else {
next()
}
})
const app = new Vue({
el: '#app',
components: { Home, Landing, Navbar, Forum },
router,
store,
});
我已经导入了VueRouter,但没有将它添加到代码中以使其更简单
1 回答
问题是路由器链接中的 href-attribute (b-nav-item href = "#") . 省略href属性确实解决了问题 .