主子路由你想不到的用处

vue是单页面应用，只有一个跟组件App.vue，在index.js入口文件中引用需要的一些组件并把app.vue根组件渲染在index.html中。我是这样理解的,app.vue、index.html和index.js之间的关系的。我们会看到app.vue中只有一个，每次跳转理由只是加载不同的组件而已。会遇到一个场景，比如有一个新闻列表页，点进去一条新闻，那么我们希望返回的时候，页面还会在我刚才点进去那条的状态，但是组件切换一定不能保存状态，当然可以使用虽然有了这个组件，但是你不知道你什么时候会遇到坑，那不妨试试路由的方式吧。

主子路由又叫嵌套，一个路由嵌套另一个路由，被嵌套的路由为子路由。当一个模板中与子路由有很多相似的地方的时候可以使用主子路由的形式。首先需要在主路由组件中添加渲染模板
,在路由index.js文件中配置子路由

1
2
3
4
5
6
7
8
9
10
11
{
  name: 'success',
  path: '/success',
  meta: {title: '成功页面', keepAlive: true},
  component: resolve => {require.ensure(['../pages/success/success.vue'], () => {resolve(require('../pages/success/success.vue'))})},
  children: [{
    path: '/success1',
    meta: {title: '成功页面1', keepAlive: true},
    component: resolve => {require.ensure(['../pages/success/success1.vue'], () => {resolve(require('../pages/success/success1.vue'))})},
  }]
}

在主路由中添加children属性，在该属性下配置子路由，最后在主路由跳转的时候，写法如下：

1
this.$router.push(`${this.$route.fullPath}/success1`)

通过this.$route下的fullPath属性主组件的路由并拼接子路由的地址，访问子路由的时候一定是加上主路由的地址。在子组件中改变了主组件中的变量，我们可以通过this.$parent.par的方式获取在主路由组件中定义的变量，不用通过路由进行将传递进行传递。并且通过主子路由的方式进行跳转，可以直接通过.this.$route.back()的方式直接回到主路由。
注意：如果路由1嵌套了路由2，路由2嵌套了路由3，那么被嵌套的子路由就直接在它的主路由中进行配置就行了，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  name: 'success',
  path: '/success',
  meta: {title: '成功页面', keepAlive: true},
  component: resolve => {require.ensure(['../pages/success/success.vue'], () => {resolve(require('../pages/success/success.vue'))})},
  children: [{
    path: '/success1',
    meta: {title: '成功页面1', keepAlive: true},
    component: resolve => {require.ensure(['../pages/success/success1.vue'], () => {resolve(require('../pages/success/success1.vue'))})},
    children: [{
      path: '/success2',
      meta: {title: '成功页面2', keepAlive: true},
      component: resolve => {require.ensure(['../pages/success/success1.vue'], () => {resolve(require('../pages/success/success2.vue'))})}
    }]
  }]
}