如何使用vue js 2中的路由器链接正确地重定向我的页面？
如何使用vue js 2中的路由器链接正确地重定向我的页面？
提问于 2022-09-09 17:30:16
我对vue js 2中的路由器链接组件有问题。
index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import OrdersView from '../views/OrdersView.vue';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/order',
name: 'order',
Component: OrdersView
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;
})HomeView.vue
<template>
<p>HomeView</p>
</template>
<script>
export default {}
</script>OrdersView.vue
<template>
<p>OrdersView</p>
</template>
<script>
export default {}
</script>App.vue
<template>
<div id="app">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<router-link to="/order">Orders</router-link>
</li>
</ul>
</div>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<router-view/>
</main>
</div>
<div>
</div>
</template>当我运行我的应用程序时，我有任何错误，当我点击路由器链接订单时，OrderView的内容不会添加到路由器视图部分。
我有任何错误。你能帮我解释一下为什么我的OrderView.vue内容没有放进app.vue (路由器-视图部分)吗？
回答 1
Stack Overflow用户
发布于 2022-09-09 18:55:58
路由器index.js有多个语法错误。
Router.
-
Vue.use()函数应该赋予VueRouter对象，而不是VueRouter对象
- 创建一个
Router对象，这不是一件事。
- 您正在导出两个不允许的默认值。
- 试图导出不在
范围内的router
当一切都被纠正后，您应该有一个如下所示的文件：
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import OrdersView from '../views/OrdersView.vue';
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/order',
name: 'order',
Component: OrdersView
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router我建议使用IDE (如)进行编码，如果没有，则使用Vetur扩展。所有这些错误通常都会在您的代码中捕获并突出显示，然后再使用这种设置运行您的应用程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73665654
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号