英文:
Why vue-router is toggling only the url but not the view component
问题
While clicking the nav link, Vue Router is toggling only the URL but not the view component, even though there don't seem to be any errors. The console shows that only the Home component is in the view, but not the Not Main component after clicking the second nav link.
英文:
While clicking the nav link vue-router is toggling only the url but not the view component, even though I don't seem to have any error. The console shows that only the Home component is at the view, but hot the Not main component after clciking the second nav link.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// router index.js
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Shops from '../views/Shops.vue';
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/shops',
name: 'Shops',
component: Shops,
},
],
});
export default router;
// Home view
<template>
<div class="wrapper">
<Header />
<Main />
<Footer />
</div>
</template>
<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
import Main from '../components/Main.vue';
export default {
name: 'Home',
components: {
Header,
Footer,
Main,
},
};
</script>
<style lang="scss" scoped></style>
// anoteher view
<template>
<div class="wrapper">
<NotMain />
</div>
</template>
<script>
import NotMain from '../components/NotMain.vue';
export default {
name: 'Shops',
components: {
NotMain,
},
};
</script>
<style lang="scss" scoped></style>
<!-- end snippet -->
答案1
得分: 0
<router-view></router-view> 在 app.js 中没有指定。这解决了问题。我需要将 <router-view></router-view> 放在 app.js 的主组件中。
英文:
<router-view></router-view> not specified at app.js That made the trick. I needed to post the <router-view></router-view> inside the app.js main component
答案2
得分: 0
在你的 app.vue 文件中，只有模板中的 router-view 部分会在路由更改时发生变化，其他内容将在每个路由上都显示。根据在 stackBlitz 上的检查，你的路由已经按预期工作，并且视图更改已经反映出来。
<template>
<div id="app">
<Header />
<router-view></router-view>
<Footer />
</div>
</template>
英文:
In your app.vue only router-view part of template will change on change of route, rest all will display on every route. As checked on the stackBlitz your routes are working as expected and view changes are reflecting already.
<template>
<div id="app">
<Header />
<router-view></router-view>
<Footer />
</div>
</template>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论