vueRouter

基本使用

1.什么是Vue Router?
- Vue Router和v-if/v-show一样,是用来切换组件的显示的
- v-if/v-show是标记来切换(true/false)
  Vue Router用哈希来切换(#/xxx)
  比v-if/v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数
2.Vue Router使用步骤
- 2.1导入Vue Router，定义组件
- 2.2定义路由规则
- 2.3根据路由规则创建路由对象
- 2.4将路径对象挂载到Vue实例中
- 2.5修改URL哈希值
- 2.6通过<router-view>渲染匹配的组件
- 示例：

<script src="js/vue-router.js"></script>
<div id="app">
    <!--5.修改URL哈希值-->
    <a href="#/one">切换到第一个界面</a>
    <a href="#/two">切换到第二个界面</a>
    <!-- 路由出口 -->
    <!-- 6.路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>
<script>
// 1.定义组件
const one = {
    template: "#one"
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    { path: '/one', component: one },
    { path: '/two', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes
});
// 4.将创建好的路由对象绑定到Vue实例上
let vue = new Vue({
    el: '#app',
    router: router,
    components: {
        one: one,
        two: two
    }
});
</script>

router-link

1.什么是router-link?
- 通过a标签确实能设置URL的hash,但是这种方式并不专业
- 在Vue Router中提供了一个专门用于设置hash的标签 router-link
- 如果是通过router-link来设置URL的HASH值, 那么不用写#,它是通过to属性来设置HASH值
- 格式：<router-link to="/类名"></router-link>
2.router-link特点
- 默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么
- 格式：<router-link to="/类名" tag="标签名"></router-link>
3.给router-link设置选中样式
- 默认情况下我们可以通过重写router-link-active类名来实现设置选中样式
- 但是我们也可以通过linkActiveClass来指定选中样式
4.重定向路由
- { path: '被重定向值', redirect: '重定向之后的值' }
- 这样就可以设置初次打开页面显示的内容
示例(上节示例的优化版)：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 500px;
        height: 500px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    /*.router-link-active{*/
    /*    background: red;*/
    /*}*/
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<!--1.导入Vue Router-->
<!--注意点: 必须先导入Vue之后再导入Vue Router-->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/one" tag="button">切换到第一个界面</router-link>
    <router-link to="/two" tag="button">切换到第二个界面</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>
<script>
const one = {
    template: "#one"
};
const two = {
    template: "#two"
};
const routes = [
    // 重定向路由
    { path: '/', redirect: '/two' },
    // 数组中的每一个对象就是一条规则
    { path: '/one', component: one },
    { path: '/two', component: two }
];
const router = new VueRouter({
    routes: routes,
    // 指定导航激活状态样式类名
    linkActiveClass: "ws-active"
});
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});
</script>

VueRouter-参数传递

1.Vue Router传递参数
- 只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象，只要能拿到路由对象,就可以通过路由对象拿到传递的参数
  - 方式一:通过URL参数的方式传递,在指定HASH的时候,通过?key=value&key=value的方式传递,在传递的组件的生命周期方法中通过this.$route.query获取
  - 方式二:通过路由规则中的占位符传递
    在指定路由规则的时候通过/:key/:key的方式来指定占位符.在路径中指定HASH的时候,通过/value/value的方式来传递值.在传递的组件的生命周期方法中通过this.$route.params的方式来获取
  - 示例(沿用上个示例)：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 500px;
        height: 500px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<div id="app">
    <!--第一种传递参数的方式: -->
    <router-link to="/one?name=lnj&age=33" tag="button">切换到第一个界面</router-link>
    <!--第二种传递参数的方式: -->
    <router-link to="/two/zs/66" tag="button">切换到第二个界面</router-link>
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>
<script>
// 1.定义组件
const one = {
    template: "#one",
    <!--第一种传递参数方法-->
    created: function () {
        console.log(this.$route.query.name);
        console.log(this.$route.query.age);
    }
};
const two = {
    template: "#two",
    <!--第二种传递参数方法-->
    created: function () {
        console.log(this.$route);
        console.log(this.$route.params.name);
        console.log(this.$route.params.age);
    }
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    // 数组中的每一个对象就是一条规则
    { path: '/one', component: one },
    <!--第二种传递参数方法-->
    { path: '/two/:name/:age', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "ws-active"
});

let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});
</script>

嵌套路由

什么是嵌套路由?
- 嵌套路由也称之为子路由,就是在被切换的组件中又切换其它子组件
- 示例: 在one界面中又有两个按钮,通过这两个按钮进一步切换one中的内容

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 500px;
        height: 500px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    .onesub1page, .onesub2page{
        width: 100%;
        height: 300px;
    }
    .onesub1page{
        background: orangered;
    }
    .onesub2page{
        background: blueviolet;
    }
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<div id="app">
    <router-link to="/one" tag="button">切换到第一个界面</router-link>
    <router-link to="/two" tag="button">切换到第二个界面</router-link>
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
        <router-link to="/one/onesub1" tag="button">切换到第一个子界面</router-link>
        <router-link to="/one/onesub2" tag="button">切换到第二个子界面</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="onesub1">
    <div class="onesub1page">
        <p>我是第一个界面子界面1</p>
    </div>
</template>
<template id="onesub2">
    <div class="onesub2page">
        <p>我是第一个界面子界面2</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>
<script>
// 1.定义组件
const onesub1 = {
    template: "#onesub1",
};
const onesub2 = {
    template: "#onesub2",
};
const one = {
    template: "#one",
    components:{
        onesub1:onesub1,
        onesub2: onesub2
    }
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    {
        path: '/one',
        component: one,
        children:[
            {
            // 如果是嵌套路由(子路由),那么不用写一级路径的地址, 并且也不用写/
                path: "onesub1",
                component: onesub1
            },
            {
                path: "onesub2",
                component: onesub2
            }
        ]
    },
    { path: '/two', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "ws-active"
});
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});
</script>

==注意点==:
- 如果是嵌套路由(子路由),那么不用写一级路径的地址, 并且也不用写/

命名视图

什么是命名视图?
- 命名视图和前面讲解的具名插槽很像,都是让不同的出口显示不同的内容
- 命名视图就是当路由地址被匹配的时候同时指定多个出口,并且每个出口中显示的内容不同
- 示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 200px;
        height: 200px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<div id="app">
    <router-view name="name1"></router-view>
    <router-view name="name2"></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一个界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二个界面</p>
    </div>
</template>
<script>
// 1.定义组件
const one = {
    template: "#one",
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    {
        path: '/',
        components: {
            name1: one,
            name2: two
        }
    },
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "ws-active"
});
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});
</script>

==注意点==：
- 1.和匿名插槽一样,如果指定了多个router-view, 那么当路由地址被匹配之后,多个router-view中显示的内容是一样的
- 2.和具名插槽一样,如果想同时显示多个不同的组件, 那么可以给出口指定名称

Watch属性

1.什么是Watch属性?
- Watch属性是专门用于监听数据变化的, 只要数据发生了变化,就会自动调用对应数据的回调方法
- 格式如下：

"$route.path": function (newValue,oldValue)              {
              console.log(newValue, oldValue);
              }

2.Watch监听路由变化
- Watch属性不仅仅能够监听数据的变化,还能够监听路由地址的变化,只要路由地址发生变化, 就会自动调用对应的回调函数.
- 在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的
- 示例：

<div id="app">
    <input type="text" v-model="num1">
    <span>+</span>
    <input type="text" v-model="num2">
    <span>=</span>
    <input type="text" disabled v-model="res">
</div>
<script>
// 1.定义组件
const one = {
    template: "#one",
};
const two = {
    template: "#two"
};
// 2.定义切换的规则(定义路由规则)
const routes = [
    { path: '/one', component: one },
    { path: '/two', component: two }
];
// 3.根据自定义的切换规则创建路由对象
const router = new VueRouter({
    routes: routes
});
let vue = new Vue({
    el: '#app',
    // 4.将创建好的路由对象绑定到Vue实例上
    router: router,
    watch: {
        // 可以通过watch监听Model中数据的变化, 只要数据发生变化, 就会自动调用对应的回调函数
      num1: function (newValue, oldValue) {
          this.res = parseInt(this.num1) + parseInt(this.num2)
      },
      num2: function (newValue, oldValue) {
          this.res = parseInt(this.num1) + parseInt(this.num2)
      }
    },
    data: {
        num1: 0,
        num2: 0,
        res: 0
    },
    // 专门用于存储监听事件回调函数
    methods: {
    /*   不用watch，用鼠标抬起keyup的写法
        change1(){
            this.res = parseInt(this.num1) + parseInt(this.num2)
        },
        change2(){
            this.res = parseInt(this.num1) + parseInt(this.num2)
        }
    */
    },
    // 专门用于定义局部组件的
    components: {
        one: one,
        two: two
    }
});
</script>

生命周期方法

1.什么是生命周期方法?
- 和webpack生命周期方法一样,都是在从生到死的特定阶段调用的方法
- PS: 生命周期钩子 = 生命周期函数 = 生命周期事件
2.Vue生命周期方法分类
- 2.1创建期间的生命周期方法
  - beforeCreate:
    - 在调用beforeCreate的时候,仅仅表示Vue实例刚刚被创建出来。此时此刻还没有初始化好Vue实例中的数据和方法,所以此时此刻还不能访问Vue实例中保存的数据和方法
  - created:
    - 在调用created的时候,是我们最早能够访问Vue实例中保存的数据和方法的地方
  - beforeMount:
    - 在调用beforeMount的时候,表示Vue已经编译好了最终模板,但是还没有将最终的模板渲染到界面上
  - mounted:
    - 在调用mounted的时候,表示Vue已经完成了模板的渲染,表示我们已经可以拿到界面上渲染之后的内容了
  - 示例：

<div id="app">
    <p>{{msg}}</p>
</div>
<!-- 以下是beforeMount时内存中的状态，而还没有渲染到页面上
<div id="app">
    <p>微双</p>
</div>
-->

<script>
let vue = new Vue({
    beforeCreate:function(){
        // console.log(this.msg); // undefined
        // console.log(this.say); // undefined
    },
    created:function(){
        // console.log(this.msg); // 微双
        // console.log(this.say);  // 输出say的函数
    },
    beforeMount:function(){
        // console.log(document.querySelector("p").innerHTML);  // {{msg}}
        // console.log(document.querySelector("p").innerText);  // {{msg}}
    },
    mounted:function(){
        console.log(document.querySelector("p").innerHTML);  // 微双
        console.log(document.querySelector("p").innerText);  // 微双
    },
    el: '#app',
    data: {
        msg: "微双"
    },
    // 专门用于存储监听事件回调函数
    methods: {
        say(){
            console.log("say");
        }
    }
});
</script>

2.2运行期间的生命周期方法
- beforeUpdate:
  - 在调用beforeUpdate的时候,表示Vue实例中保存的数据被修改了
  - ==注意点==:只有保存的数据被修改了才会调用beforeUpdate, 否则不会调用
  - ==注意点==:在调用beforeUpdate的时候, 数据已经更新了,但是界面还没有更新
- updated:
  - 在调用updated的时候,表示Vue实例中保存的数据被修改了,并且界面也同步了修改的数据了。
  - 也就是说:数据和界面都同步更新之后就会调用updated
- 示例：

<div id="app">
    <p>{{msg}}</p>
</div>

<script>
let vue = new Vue({
    beforeUpdate:function(){
        // console.log(this.msg);  // 微双2
        // console.log(document.querySelector("p").innerHTML);  // 微双
        // console.log(document.querySelector("p").innerText);  // 微双
    },
    updated:function(){
        console.log(this.msg);  // 微双2
        console.log(document.querySelector("p").innerHTML);  // 微双2
        console.log(document.querySelector("p").innerText);  // 微双2
    },
    el: '#app',
    data: {
        msg: "微双"  // 修改为微双2后测试beforeUpdate和updated
    },
    // 专门用于存储监听事件回调函数
    methods: {
        say(){
            console.log("say");
        }
    }
});
</script>

Vue实例对象可以看做是一个大的组件,我们自定义的组件可以看做是一个小的组件那么大的组件中可以使用的属性和方法,在小的组件中也可以使用
- 例如: 在Vue实例中我们可以添加data,methods, 那么在自定义的组件中也可以添加data, methods
- 所以Vue实例中可以使用生命周期方法,组件中也可以使用生命周期方法

2.3销毁期间的生命周期方法
- beforeDestroy:
  - 在调用beforeDestroy的时候,表示当前组件即将被销毁了
  - ==注意点==:只要组件不被销毁,那么beforeDestroy就不会调用
  - ==beforeDestroy函数是我们最后能够访问到组件数据和方法的函数==
- destroyed：
  - 在调用destroyed的时候,表示当前组件已经被销毁了
  - ==注意点==:只要组件不被销毁,那么destroyed就不会调用
  - ==不要在这个生命周期方法中再去操作组件中数据和方法==
- 示例：

<div id="app">
    <button @click="change">切换</button>
    <!--通过v-if来切换, 会直接删除和重新创建-->
    <one v-if="isShow"></one>
</div>
<template id="one">
    <div>
        <p>组件</p>
    </div>
</template>
<script>
    Vue.component("one", {
        template: "#one",
        data: function(){
            return {
                msg: "微双"
            }
        },
        methods: {
            say(){
                console.log("say");
            }
        },
        beforeDestroy: function(){
            console.log("beforeDestroy");  // beforeDestroy
            console.log(this.msg);  // 微双
            console.log(this.say);  // say函数
        },
        destroyed: function(){
            console.log("destroyed");  // destroyed
        }
    });
    let vue = new Vue({
        el: '#app',
        data: {
            isShow: true,
        },
        methods: {
            change(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

Vue-特殊特性

1.Vue特殊特性
- Vue特点:数据驱动界面更新,无需操作DOM来更新界面
- 也就是说Vue不推荐我们直接操作DOM,但是在企业开发中有时候我们确实需要拿到DOM操作DOM。那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
- 在Vue中如果想要拿到DOM元素我们可以通过ref来获取
2.ref使用
- 2.1在需要获取的元素上添加ref属性.
  - 例如: <p ref="mypp">我是段落</>
- 2.2在使用的地方通过this.$refs.xxx获取
  - 例如 this.$ref.myppp
3.ref特点
- ref添加到元素DOM上, 拿到的就是元素DOM
- ref添加到组件上, 拿到的就是组件

获取元素和组件
- 如果是通过原生的语法来获取元素,无论是原生的元素还是自定义的组件,拿到的都是原生的元素
  - 并且VUE官方并不推荐我们这样获取
- 在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取（vue推荐）
  - ==注意点==
    - ref如果是添加给元素的元素,那么拿到的就是元素的元素
    - ref如果是添加给自定义的组件,那么拿到的就是自定义的组件
示例：

<div id="app">
    <button @click="myFn">我是按钮</button>
    <p ref="myppp">我是原生的DOM</p>
    <one id="myOne" ref="myOne"></one>
</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
Vue.component("one", {
    template: "#one",
    data: function(){
        return {
            msg: "微双"
        }
    },
    methods: {
        say(){
            console.log("say");
        }
    },
});
let vue = new Vue({
    el: '#app',
    methods: {
        myFn(){
            // VUE官方并不推荐我们这样通过原生的语法来获取元素
            // console.log(document.querySelector("p"));
            // console.log(document.querySelector("#myOne"));

            console.log(this.$refs);
            console.log(this.$refs.myppp);
            console.log(this.$refs.myOne);
            console.log(this.$refs.myOne.msg);
            console.log(this.$refs.myOne.say);
        }
    }
});
</script>

组件渲染方式

1.Vue渲染组件的两种方式
- 1.1先定义注册组件,然后在Vue实例中当做标签来使用
- 1.2先定义注册组件,然后通过Vue实例的render方法来渲染
- 示例：

// 第一种 在Vue实例中当做标签来使用
<div id="app">
    <one></one>  // 输出结果为one的组件展示在vue实例中
</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
Vue.component("one", {
    template: "#one"
});
let vue = new Vue({
    el: '#app'
});
</script>

// 第二种 通过Vue实例的render方法来渲染
<div id="app">    // 输出结果为vue实例被One这个组件全覆盖
</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
Vue.component("one", {
    template: "#one"
});
let vue = new Vue({
    el: '#app',
    render: function(createElement){
        let html = createElement("one");
        return html;
    }
});
</script>

2.两种渲染方法的区别
- 1.1当做标签来渲染,不会覆盖Vue实例控制区域
- 1.2通过render方法来渲染,会覆盖Vue实例控制区域