Vue 基础 day04

什么是路由

1. 后端路由: 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器的资源；
2. 前端路由: 对于单页面应用程序来说，主要是通过URL中的hash（#）来实现不同页面之间的跳转，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3. 在点页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 Vue 中使用 vue-router

1. 导入 vue-router 组件类库

<script src="./lib/vue-router-3.1.3.js"></script>

1. 使用 Vue.extend 创建组件

// 使用 Vue.extend 创建登录组件
var login = Vue.extend({
    template: '<h1>登录组件</h1>'
});
// 使用 Vue.extend 创建注册组件
var register = Vue.extend({
    template: '<h1>注册组件</h1>'
});

1. 创建一个 router 实例, 通过 routers 属性来定义路由匹配规则

var router = new VueRouter({
    routers: [
        // 1, path 表示监听哪个路由链接地址
        // 2, component 表示是 如果 路由是前面匹配到的 path 则展示 component 属性对应的那个组件
        // 注意: component 必须是 组件模板对象, 不能是组件的引用名称
        { path: '/login', template: login},
        { path: '/register', template: register},
        // redirect 重定向路由默认位置
        { path: '/', redirect: '/login'}
    ]
});

1. 使用 Vue 实例的 router 属性 来使用路由规则

var vm = new Vue({
    el: '#app',
    router: router // 使用 router 属性来使用路由规则
});

1. 使用 router-link 组件 来导航, 使用 router-view 组件来显示匹配到的组件

<!-- 默认渲染为 a 标签 如果需要指定 使用 tag -->
<router-link to="/login" tag="span">登录</router-link>
<touter-link to="/register">注册</touter-link>
<!-- 使用 router-view 组件来显示匹配到的组件 -->
<router-view></router-view>

设置选中路由高亮的两种方式

1. router-link 渲染出来的属性默认 带有 router-link-active 类名, 可以通过该类名设置路由样式
2. 可以在 router 实例中 通过 linkActiveClass 属性 自定义类名 来进行全局配置

.router-link-active, myActive {
   color: 'red';
}

var router = new VueRouter({
    routers: [],
    linkActiveClass: 'myActive'
});

路由中使用动画

只需要将 Vue 中提供的 transition 标签 包裹住 router-view 标签, 在设置样式即可

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translate(80px, 0);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

<transition name="" mode="out-in">
  <router-view></router-view>
</transition>

路由中传参的两种方式

<div id="app">
    <router-link to="/login/1/zs"></router-link>
    <router-link to="/register?id=1&name=zs"></router-link>
    <router-view></router-view>
</div>

var login = Vue.extend({
    // 1. 通过 params 属性来取值
    template: '<h1>login -- {{ $route.params.id }} -- {{ $route.params.name }}</h1>'
});
var register = Vue.extend({
    // 2. 通过 query 属性来取值
    template: '<h1>register -- {{ $route.query.id }} -- {{ $route.query.name }}</h1>'
});
var router = new VueRouter({
    routes: [
        { path: '/login/:id/:name', template: login },
        { path: '/register', template: register }
    ],
});
var vm = new Vue({
    el: '#app',
    router: router
});

路由的嵌套

<div id="app">
    <router-link to="/parent">Parent</router-link>
    <router-view></router-view>
</div>
<template id="tmp">
    <div>
        <h1>这是 parent 组件</h1>
        <router-link to="/parent/child1"></router-link>
        <router-link to="/parent/child2"></router-link>
        <!-- 一层萝卜一个坑??? -->
        <router-view></router-view>
    </div>
</template>

var child1 = { template: '<h3>child 1</h3>'};
var child2 = { template: '<h3>child 2</h3>'};
var parent = { template: '#tmp' };
var router = new VueRouter({
    routes: [{
        path: '/parent',
        component: parent,
        children: [
            // 注意: 以 / 开头的嵌套路径会被当做根路径, 慎用
            { path: 'child1', component: child1 },
            { path: 'child2', component: child2 }
        ]
    }]
});
var vm = new Vue({
    el: '#app',
    router: router
});

命名视图

<div id="app">
    <!-- 一个视图需要一个组件渲染, 因此同个路由多个视图,就需要多个组件 -->
    <router-view></router-view>
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>

var header = { template: '<h3>header</h3>' };
var left = { template: '<h3>left</h3>' };
var main = { template: '<h3>main</h3>' };
var router = new VueRouter({
    routes: [
        { path: '/', components: { default: header, left, main }}
    ]
});
var vm = new Vue({
    router
}).$mount('#app');

watch 属性的使用

案例1: 监听 data 中属性的改变

<div id="app">
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <span>{{ fullName }}</span>
</div>

var vm = new Vue({
  data: {
    firstName: '',
    lastName: '',
    fullName: ''
  },
  watch: {
    // 接受两个参数 一个新的值, 一个更改之前的旧值
    firstName: function (newVal, oldVal) {
      this.fullName = newVal + this.lastName;
    },
    lastName: function (newVal, oldVal) {
      this.fullName = this.firstName + newVal;
    }
  }
}).$mount('#app');

案例2: 监听路由对象的改变

var vm = new Vue({
  watch: {
      '$route.path': function (newVal, oldVal) {
        if (newVal === '/login') {
          console.log('welcome to login');
        } else if (newVal === '/register') {
          console.log('welcome to register');
        }
      }
  }
}).$mount('#app');

computed 计算属性使用

var vm = new Vue({
  data: {
    firstName: '',
    lastName: '',
  },
  computed: { // 在computed中可以定义一些属性, 这些属性 叫做计算属性  本质: 一个方法, 只不过在使用的时候 是把他们的名称直接当做属性来使用的, 并不会当做方法来用
    fullName: function () {
      /**
      * 注意:
      *     1. 计算属性在引用的时候, 一定不要加 () 去调用, 直接把它当做普通的属性就好
      *     2. 只要计算属性 这个 function 内部, 所用到的任何 data 中数据发生了变化, 就会立即重新       *     计算 这个计算属性的值
      *     3. 计算属性的求值结果, 会被缓存起来, 方便下次使用; 如果计算属性方法中所有的数据没有发       *     生任何任何变化, 则不会重新计算
      */
      return this.firstName + this.lastName;
    }
  }
}).$mount('#app');

watch、computed 和 methods 之间的对比

1. computed 属性的结果会被缓存, 除非依赖的响应式属性变化才会重新计算, 主要当做属性来使用;
2. methods 方法表示一个具体的操作, 主要书写业务逻辑;
3. watch 一个对象, 键是需要观察的表达式, 值是对应的回调函数, 主要用来监听某些特性数据的变化, 从而进行某些业务逻辑操作; 可以看做是 computed 和 methods 的结合体;