Vue route嵌套 及路由监控

vue是单页面应用的，假设我们做一个页面，把内容和底部标题栏部分分开，我们可以使用嵌套的方法，如图，把底部标题框和内容部分分别做成一个vue页面

 

这时就会有两个页面了，利用路由嵌套的方法去写，代码如下，这个底部标题栏有5个页面，也就是5个children，运行就成功 

{
  path: '/',
    name: 'main',
      component: main,
        meta: {
    requireAuth: true,
      title: '底部标题栏'
  },
  children: [
    {
      path: '/',
      name: 'home', （首页）
      component: home
    },
    {
      path: '/tao',
      name: 'wei_tao',
      meta: {
        requireAuth: true,
        title: '微淘页面'
      },
      component: () => import('@/components/weitao')
    },
    {
      path: '/news',
      name: 'news',
      meta: {
        requireAuth: true,
        title: '消息页面'
      },
      component: () => import('@/components/news')
    }，
    {
      path: '/shopping',
      name: 'shopping',
      meta: {
        requireAuth: true,
        title: '购物车页面'
      },
      component: () => import('@/components/shopping')
    }，
    {
      path: '/my',
      name: 'my',
      meta: {
        requireAuth: true,
        title: '我的页面'
      },
      component: () => import('@/components/my')
    }
  ]

},

路由注册的写法有两种

第一种
            
import index from '@/components/index'（ 先声明）
       {
          path: '/',
          name: 'index',
          component: index（引用）
        },


第二种

  {
      path: '/tao',
      name: 'wei_tao',
      meta: {
        requireAuth: true,
        title: '微淘页面'
      },
      component: () => import('@/components/weitao')  
    },

两种的区别在于：第一种运行的时候就已经把声明的所有页面都先缓存下来了，引用的话就直接变换

                            第二种是引用到的时候再去加载这个页面

 

 

路由监控

上方的底部标题栏页面的转换可以使用路由来改变值

watch: {       
 
  $route(to,from){                 //to 到哪里去   from 从哪里来
    if(to.path =="/index"){             
         this.active = 0; 
    }
      else if(to.path =="/weitao"){
       this.active = 1; 
    }
    else if(to.path =="/shopping"){
       this.active = 2; 
    }
    else if(to.path =="/news"){
       this.active = 3; 
    }
    else if(to.path =="/My"){
      this.active = 3;
    }
  }
},