加入路由功能后,无法渲染出Todo页面。

来源:4-2 Vue-router之配置

qq_d超_0

2018-07-19

我按照老师的视频,进行到再app.vue中加入<router-view />标签,但是在地址栏中,只能渲染出头和底部,中间部分缺失掉。输入/login也无法渲染出login的页面。浏览器没有报任何错误。希望老师给点调试的提示。

写回答

6回答

Marianax

2018-07-19

routes.js 里面的component: Todo,component改成小写试试?

1
1
qq_d超_0
谢谢~解决了
2018-07-19
共1条回复

qq_d超_0

提问者

2018-07-19

import Todo from '../views/todo/todo.vue'

import Login from '../views/login/login.vue'


export default [

{

path: '/',

redirect: '/app'

},

{

path: '/app',

Component: Todo

},

{

path: '/login',

Component: Login

}


]



0
0

qq_d超_0

提问者

2018-07-19

import Router from 'vue-router'

import routes from './routes'


export default () => {

return new Router({

routes,

mode: 'history'

})

}



0
0

qq_d超_0

提问者

2018-07-19

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './app.vue'

import './assets/images/bg.jpeg'

import './assets/styles/global.styl'

import createRouter from './config/router'

Vue.use(VueRouter)

const router = createRouter()


new Vue({

router,

render: (h) => h(App)

}).$mount('#root')



0
0

qq_d超_0

提问者

2018-07-19

<template>

<div id="text">

<div id="cover">

<Header></Header>

<!-- <todo></todo> -->

<router-view />

<Footer></Footer>

</div>

</div>

</template>


<script>

import Header from './layout/header.vue'

import Footer from './layout/footer.jsx'

import Todo from './views/todo/todo.vue'

export default {

components: {

Header,

Footer,

Todo

}

}

</script>

<style lang="stylus" scoped>

#app{

position absolute

left 0

right 0

top 0

bottom 0

}

#cover{

position absolute

left 0

top 0

right 0

bottom 0

background-color #999

opacity .9

z-index 0

}

</style>



0
0

Marianax

2018-07-19

能否发下相关代码看下?

0
2
qq_d超_0
代码我贴出来了,麻烦帮忙看下,谢谢
2018-07-19
共2条回复

Vue核心技术 Vue+Vue-Router+Vuex+SSR实战精讲

深入讲解Vue核心技术,展示Vue应用开发中的各种问题和解决方案

3168 学习 · 853 问题

查看课程