vue-router 嵌套路由没反应
2017-11-02 17:15
1056 查看
先看下route.js
当你访问的时候,发现 http://localhost:8080/#/login http://localhost:8080/#/class
都正常,但是: http://localhost:8080/#/course/list http://localhost:8080/#/course/content
都是一片空白,检查元素,发现没有加载过来。检查,子路由前面并没有加/,所以这没有问题,排除。
其实这是list的父级course没有component,有了componnet,并且需要在这个component理要有<router-view></router-view>,修改下:
Course.vue如下:
这样就可以实现嵌套了。想想,本例子中,其实App组件也是这样的,他提供了个<router-view></router-view>,对不对?
http://localhost:8080/#/course/list http://localhost:8080/#/course/content
都可以访问了。
//route.js const App = () => import('../App.vue'); const Login = () => import('../component/Login.vue'); const Class = () => import('../component/Class.vue'); const CourseList = () => import('../component/CourseList.vue'); const CourseContent = () => import('../component/CourseContent.vue'); const routers = [{ path:'/', component:App, children:[{ path:'login', component:Login },{ path:'class', component:Class }, { path:'course', children:[{ path:'list', component:CourseList },{ path:'content', component:CourseContent } ] }, ] }] export default routers
当你访问的时候,发现 http://localhost:8080/#/login http://localhost:8080/#/class
都正常,但是: http://localhost:8080/#/course/list http://localhost:8080/#/course/content
都是一片空白,检查元素,发现没有加载过来。检查,子路由前面并没有加/,所以这没有问题,排除。
其实这是list的父级course没有component,有了componnet,并且需要在这个component理要有<router-view></router-view>,修改下:
{ path:'course', component:Course children:[{ path:'list', component:CourseList },{ path:'content', component:CourseContent } ] },
Course.vue如下:
<template> <div> <router-view></router-view> </div> </template>
这样就可以实现嵌套了。想想,本例子中,其实App组件也是这样的,他提供了个<router-view></router-view>,对不对?
http://localhost:8080/#/course/list http://localhost:8080/#/course/content
都可以访问了。
相关文章推荐
- vue router学习——动态路由和嵌套路由
- vue-router: 嵌套路由
- vue-router: 嵌套路由
- vue基础动态路由,嵌套路由router-link切换
- vue-router菜鸟进阶!(嵌套路由VS命名路由)
- 深入Vue-Router路由嵌套理解
- vue-router -- 嵌套路由
- vue-router:嵌套路由的使用方法
- vue-router: 嵌套路由
- Vue-router嵌套路由的使用
- vue-router中定义动态路由、嵌套路由,并动态获取参数
- vue2.0子路由配置和跳转 vue-router: 嵌套路由
- Vue 之 vue-router 路由嵌套不显示问题
- vue-router: 嵌套路由
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- 讲解vue-router之什么是嵌套路由
- Vue--router-->>项目多路由嵌套--常用
- vue-router 设置默认路由
- vue-router 路由基础的详解
- 前端路由 -- vue-router