[英]Vue using router-link to single page components
All the code is at https://github.com/shanegibney/vue-component-routes 所有代码都在https://github.com/shanegibney/vue-component-routes
Using Vue3.8.3, I am trying to use and to link to single page components. 使用Vue3.8.3,我试图使用并链接到单页组件。 These components are registered in src/routes/index.js here is the file 这些组件已在src / routes / index.js中注册,这是文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(VueRouter)
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/about',
name: 'About',
component: About
}]
})
That should set up the routes. 那应该设置路线。
Then Home.vue component contains a menu which should link to these components. 然后,Home.vue组件包含一个菜单,该菜单应链接到这些组件。
Home.vue Home.vue
<template>
<div class="home">
<b-navbar type="light" variant="light" toggleable="md">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
</style>
Also the App.vue file looks like this, 而且App.vue文件看起来像这样,
<template>
<div id="app">
<div class="">
I am app.vue
</div>
<Home />
</div>
</template>
<script>
import Home from '@/components/Home.vue'
export default {
name: 'app',
components: {
Home
}
}
</script>
all this really does is calls the Home.vue component. 所有这些实际上所做的就是调用Home.vue组件。
If the components are registered in src/routes/index.js should they be globally accessible? 如果组件在src / routes / index.js中注册,那么它们是否可以全局访问?
Also after I installed routes using $npm install vue-router I created the directory routes inside src because it did not exist. 同样,在使用$ npm install vue-router安装路由之后,我在src内创建了目录路由,因为它不存在。 Then I put index.js inside routes. 然后我将index.js放在路由中。 Perhaps this is not correct. 也许这是不正确的。
Not sure if it is helpful but main.js looks like this, 不确定是否有帮助,但是main.js看起来像这样,
import Vue from 'vue'
import '@babel/polyfill'
import 'mutationobserver-shim'
import VueRouter from 'vue-router'
import './plugins/bootstrap-vue'
import App from './App.vue'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
The error I get mentions a 'mismatch', 我收到的错误提到“不匹配”,
[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
I presume this is something to do with the routes in index.js not matching with the "to" paths in router-link. 我认为这与index.js中的路由与router-link中的“ to”路径不匹配有关。
How can I ensure index.js in being included in the app? 如何确保index.js包含在应用程序中?
Any help would be greatly appreciated. 任何帮助将不胜感激。
Thanks, 谢谢,
You forgot to inject your router in the Vue app: 您忘记将路由器插入Vue应用程序:
import Vue from 'vue'
import '@babel/polyfill'
import 'mutationobserver-shim'
import VueRouter from 'vue-router'
import './plugins/bootstrap-vue'
import App from './App.vue'
import router from './router' // <= here
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router, // <= and here
render: h => h(App),
}).$mount('#app')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.