前端与移动开发之vue-day3（4）

设置路由高亮设置路由切换动效在路由规则中定义参数在规则中定义参数：

    { path: '/register/:id', component: register }

1. 通过 this.$route.params来获取路由中的参数：

    var register = Vue.extend({
          template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
        });

使用 children 属性实现路由嵌套

<div id="app">
  <router-link to="/account">Account</router-link>

  <router-view></router-view>
</div>

<script>
  // 父路由中的组件
  const account = Vue.extend({
    template: `<div>
      这是account组件
      <router-link to="/account/login">login</router-link> | 
      <router-link to="/account/register">register</router-link>
      <router-view></router-view>
    </div>`
  });

  // 子路由中的 login 组件
  const login = Vue.extend({
    template: '<div>登录组件</div>'
  });

  // 子路由中的 register 组件
  const register = Vue.extend({
    template: '<div>注册组件</div>'
  });

  // 路由实例
  var router = new VueRouter({
    routes: [
      { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
      {
        path: '/account',
        component: account,
        children: [ // 通过 children 数组属性，来实现路由的嵌套
          { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
          { path: 'register', component: register }
        ]
      }
    ]
  });

  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    components: {
      account
    },
    router: router
  });
</script>

命名视图实现经典布局
标签代码结构：

<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>
JS代码：

<script>
    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    // 创建路由对象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
CSS 样式：

<style>
  .header {
    border: 1px solid red;
  }

  .content{
    display: flex;
  }
  .sidebar {
    flex: 2;
    border: 1px solid green;
    height: 500px;
  }
  .mainbox{
    flex: 8;
    border: 1px solid blue;
    height: 500px;
  }
</style>