vue-router中的嵌套路由内容不变
初学vue,遇到很多不明白的方,记录一下。
先看router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Dashboard from '@/components/Dashboard'
import ArticleList from '@/components/article/List'
import ArticleEdit from '@/components/article/Edit'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: {
name: ''
}
}
,
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
children:[
{
path: '/article',
name: 'Article',
component: ArticleList,
children:[
{
path: 'add',
name: 'ArticleAdd',
component: ArticleEdit,
},
{
path: 'index',
name: 'ArticleIndex',
component: ArticleList,
}
]
}
]
}
]
})
当你访问的时候,发现
http://localhost:8001/#/login
http://localhost:8001/#/dashboard
都正常,但是访问时:
http://localhost:8001/#/article/index
http://localhost:8001/#/article/add
都是显示的文章列表,也就是article/index中的内容,无法显示article/add中的表单。
检查元素,发现没有加载过来。检查,子路由前面并没有加/,所以这没有问题,排除。
其实这是article这一级没有component,有了componnet,并且需要在这个component理要有
children:[
{
path: '/article',
name: 'Article',
component: Article,
children:[
{
path: 'add',
name: 'ArticleAdd',
component: ArticleEdit,
},
{
path: 'index',
name: 'ArticleIndex',
component: ArticleList,
}
]
}
]
Article.vue如下:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Articleview"
}
</script>
<style scoped>
</style>
这样就可以实现嵌套了。