vue-router 引用不显示

vue-router 引用不显示

请问为什么我引入了Home这个组件后,但是界面总是不显示,这是哪里出现问题了

*<template>

<div id="app">

<Home></Home>

<router-view></router-view>

</div>

</template>

<script>

import Home from './components/Home.vue'

export default {

name: 'App',

components: {

Home,

}

}

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

*</style>**

我的home组件

<template>

<div>

<h1>home</h1>

<p>{{msg}}</p>

</div>

</template>

<script>

export default {

data () {

return {

msg: "我是home 组件"

}

}

}

</script>

我的router.js

import Home from './components/Home.vue'

const routers = [

{

path: '/home',

name: 'home',

component: Home

}, {

path: '/',

component: Home

},

]

export default routers

我的main.js

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import VueRouter from 'vue-router';//引入了官方的vue-router

import routers from './routers'//这里我引入了routers.js文件

//然后我使用

const router = new VueRouter({

mode: 'history',

routes: routers//这里我将这个规则给到了我的vuerouter中。

})

Vue.config.productionTip = false

Vue.use(ElementUI);

Vue.use(VueRouter);

new Vue({

router,

render: h => h(App),

}).$mount('#app')


回答:

你的routers写的不太对
const routers = [

{

path: '/',

redirect: '/home',

children: [

{

path: '/home',

name: 'home',

component: Home

}

]

},

]


回答:

试试这样

const routers = [

{

path: '/home',

name: 'home',

component: Home

}, {

path: '/',

redirect: Home

},

]

以上是 vue-router 引用不显示 的全部内容, 来源链接: utcz.com/p/937370.html

回到顶部