黑马程序员技术交流社区

标题: 【郑州校区】前端与移动开发之vue-day3（4） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-11-16 16:00
标题: 【郑州校区】前端与移动开发之vue-day3（4）
设置路由高亮设置路由切换动效在路由规则中定义参数在规则中定义参数：

[AppleScript] 纯文本查看 复制代码

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



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



    var register = Vue.extend({

          template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'

        });

使用 children 属性实现路由嵌套

[AppleScript] 纯文本查看 复制代码

  <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>

命名视图实现经典布局

• 标签代码结构：
• [AppleScript] 纯文本查看 复制代码

  <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代码：
• [AppleScript] 纯文本查看 复制代码

  <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 样式：
• [AppleScript] 纯文本查看 复制代码

    <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>

  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2