Vue基础第四课-杨标的博客

Vue基础第四天

vue-router前端路由

路由的概念本是通过url地址栏动态的去显示浏览器里面的内容，我们以前学习express的时候，通过express来构建过路由。这一种路由我们叫后端的路由（服务器路由）

同理，前端也是可以有路由的，前端的路由也是根据访问地址URL发生改变以后动态的去显示页面上面的内容，它的原理率主要是基于浏览器的地址栏时面的target这一个特性，下面的例子演示了基本原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端路由原理</title>
    <style type="text/css">
        #login,
        #register,
        #index {
            width: 100%;
            height: 100%;
            position: fixed;
            display: none;
        }      
        #login {
            background-color: antiquewhite;
        }        
        #index {
            background-color: blue;
        }     
        #register {
            background-color: aquamarine;
        }        
        #login:target,
        #register:target,
        #index:target {
            display: block;
        }  
        #app>div:not(:target) {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="login">
            这是一个登陆的页面
        </div>
        <div id="register">
            这是一个注册的页面
        </div>
        <div id="index">
            这是主页内容，里面有很多东西
        </div>
    </div>
</body>
</html>

说明：在上面的代码当中，我们分别定义了三个div，取了不同的id,然后在css当中，通过:target这一css特性，去决定要让那一个div显示出来，这就是前端路由原理

在vue当中，我们有一个第三方的插件叫vue-router，这个插件就是vue全家桶里面的一员，它主要负责将我们的组件按照不同的url地址去动态的显示或隐藏，现在，我们就来学习一下这个插件

导入vue-router包
```
$ cnpm install vue-router 
```
在要使用的项目当中引入
创建Vue对象，接管页面区域
创建组件，注册到vue里面去
创建VueRouter对象，用于决定到底有几个路由，每个路由的地址与组件怎么构成关系
将创建的VueRouter加载到Vue对象时面去

现在，请参考下面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端路由</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router.min.js"></script>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        .activelink {
            font-weight: bold;
            color: red !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <nav class=" navbar navbar-default" role="navigation">
            <div class=" container">
                <div class=" navbar-header">
                    <a href="#" class=" navbar-brand">Vue-Router</a>
                </div>
                <ul class=" nav navbar-nav navbar-right">
                    <li>
                        <!-- <a href="#/login">登陆</a> -->
                        <router-link :to="{name:'login'}" active-class="activelink">登陆</router-link>
                    </li>
                    <!-- 这一个地方的router-link默认情况下，会被渲染成一个a标签
                         如果你要把它渲染成其它的标签 ，那么就用tag去改变它的属性值
                    -->
                    <li>
                        <!-- <router-link to="/register">注册</router-link> -->
                        <router-link :to="{name:'reg'}" active-class="activelink">注册</router-link>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- 在这里，加上一个router-view以后，那么，就会根据你的路由地址，把你的组件加载到这一个地方来-->
        <router-view></router-view>
    </div>

    <!-- 这是登陆的组件模板-->
    <template id="login">
      <div class=" container">
        <div class=" page-header">
          <h2 class=" text-center text-primary">登陆</h2>
        </div>
        <form role="form" class=" form-horizontal" style="width:600px;margin: auto">
          <div class=" form-group" >
            <div class=" input-group">
              <div class=" input-group-addon">
                账号
              </div>
              <input type="text" placeholder="请输入账号" class=" form-control">
            </div>
          </div>
          <div class=" form-group" >
            <div class=" input-group">
              <div class=" input-group-addon">
                密码
              </div>
              <input type="text" placeholder="请输入密码" class=" form-control">
            </div>
          </div>
          <div class=" form-group">
              <button type="button" class=" btn btn-primary btn-block">登陆</button>
          </div>
        </form>
      </div>
    </template>

    <!--这是注册的组件模板-->
    <template id="register">
        <div class=" container">
          <div class=" page-header">
            <h2 class=" text-center text-primary">注册</h2>
          </div>
          <form role="form" class=" form-horizontal" style="width:600px;margin: auto">
            <div class=" form-group" >
              <div class=" input-group">
                <div class=" input-group-addon">
                  账号
                </div>
                <input type="text" placeholder="请输入账号" class=" form-control">
              </div>
            </div>
            <div class=" form-group" >
              <div class=" input-group">
                <div class=" input-group-addon">
                  密码
                </div>
                <input type="text" placeholder="请输入密码" class=" form-control">
              </div>
            </div>
            <div class=" form-group text-center">
              <button type="button" class=" btn btn-primary">注册</button>
              <button type="button" class=" btn btn-info">返回</button>
            </div>
          </form>
        </div>
    </template>
</body>
<script>
    var login = {
        template: "#login"
    };
    var register = {
        template: "#register"
    };
    //现在组件已经定义好了，我需要当前这个页面根据我访问的url然后用vue动态的去加载我们的组件
    //创建一个vue的路由对象
    //router代表的是路由管理对象
    //route 代表单个当前的路由对象
    var router = new VueRouter({
        //这里的routes就是用来定义，你这里有多少个路由对象
        routes: [
            //里面的每一个路由都是一个对象
            {
                path: "/login", //代表当前url跳转的路径
                component: login, //代表在当前这个路径下面，我们如何显示组件（显示那一个组件）
                name: "login" //给当前路由取一个别名
            }, {
                path: "/register",
                component: register,
                name: "reg"
            }
        ]
    })
    new Vue({
        el: "#app",
        router,
        components: {
            login,
            register
        }
    })
</script>
</html>

说明：在上面的代码当中，我们使用了组件，也使用了VueRouter对象，还使用Vue对象，上面的代码充分按照我们之前的6个步骤来完成，有几点需要在这里说明一下

创建路由我们使用VueRouter
```
var router=new VueRouter({
    routes:[

    ]
});
```
在这个创建过程里面，它接收一个参数，这个参数是一个对象,里面有一个routes属性，这个routes代表的就是所有单个对象的集合
创建路由的时候，创建里面的单个路由对象，里面的每个路由都是一个对象，这个对象里面，有两个必填属性，一个是path，一个是component,代表如下
```
{
    path:"/login",  //代表路径
    component:login,  //代表加载的组件
    name:"login"	//代表路由的别别
}
```
在要显示路由的地方，我们使用Vue内部的组件router-view去显示<router-view></router-view>;
如果希望点击某一个链接以后执行跳转路由，我们可以通过下面三种方法来完成：
1. a标签来完成
```
<a href="#/register">注册</a>
```
2. router-link的to属性指向path
```
<router-link to="/register">注册</router-link>
```
3. router-link的to属性动态绑定
```
<router-link :to="{name:'register'}">注册</router-link>
```
  说明：这里的register是路由的别名

vue-router子路由(嵌套路由)

我们的Vue是根据url地址动态的切换我们页面上面的内容，它可以在一级路由下面直接切换，也可以在某一个路由下面去切换，这样就构成一个路由的嵌套，现在我们来看一下代码

 <!-- 这是登陆的组件模板-->
<template id="login">
    <div class=" container">
        <div class=" page-header">
            <h2 class=" text-center text-primary">登陆</h2>
        </div>
        <ul class=" nav nav-pills nav-justified">
            <li>
                <router-link :to="{name:'loginByForm'}" active-class="active">账号登陆</router-link>
            </li>
            <li>
                <router-link :to="{name:'loginByqrCode'}" active-class="active">扫码登陆</router-link>
            </li>
            <!-- 根据路由地址，显示不同组件内容 -->
            <router-view></router-view>
        </ul>
    </div>
</template>

<!-- 账号登陆模板 -->
<template id="loginByForm">
    <form role="form" class=" form-horizontal" style="width:600px;margin: auto">
        <div class=" form-group" >
            <div class=" input-group">
                <div class=" input-group-addon">
                    账号
                </div>
                <input type="text" placeholder="请输入账号" class=" form-control">
            </div>
        </div>
        <div class=" form-group" >
            <div class=" input-group">
                <div class=" input-group-addon">
                    密码
                </div>
                <input type="text" placeholder="请输入密码" class=" form-control">
            </div>
        </div>
        <div class=" form-group">
            <button type="button" class=" btn btn-primary btn-block">登陆</button>
        </div>
    </form>
</template>

说明：在上面的代码里面，我们就注册了两个模板，然后通过这两个模板去构成组件

var login = {
    template: "#login"
};
var register = {
    template: "#register"
};
var loginByForm = {
    template: "#loginByForm"
};
var loginByqrCode = {
    template: "#loginByqrCode"
};

说明：上面的代码分别构成了四个组件

我们上面的四个组件当中，我们希望把oginByForm与loginByarCode嵌入到login的路由里面，这个时候，html代码如下：

<!-- 这是登陆的组件模板-->
<template id="login">
    <div class=" container">
        <div class=" page-header">
            <h2 class=" text-center text-primary">登陆</h2>
        </div>
        <ul class=" nav nav-pills nav-justified">
            <li>
                <router-link :to="{name:'loginByForm'}" active-class="active">账号登陆</router-link>
            </li>
            <li>
                <router-link :to="{name:'loginByqrCode'}" active-class="active">扫码登陆</router-link>
            </li>
            <!-- 根据路由地址，显示不同组件内容 -->
            <router-view></router-view>
        </ul>
    </div>
</template>

说明：这个时候，我们看到，在登陆的组内部，我们又有一个router-view,这就相当于一个子级的路由

模板与组件都配置完成以后，我们需要在配置router对象，让login这个组件与loginByForm及loginByqrCode构成嵌套路由关系，这时候，路由配置如下：

var router = new VueRouter({
    //这里的routes就是用来定义，你这里有多少个路由对象
    routes: [
        //里面的每一个路由都是一个对象
        {
            path: "/login", //代表当前url跳转的路径
            component: login, //代表在当前这个路径下面，我们如何显示组件（显示那一个组件）
            name: "login", //给当前路由取一个别名
            children: [
                //里面的配置方法与routes里面的配置方法一样，只是在path的路径配置处有一些不一样
                //如果是子级路由，那么，我们就需 要注意，在path里在，不要写"/"
                //这样，它出现的路径就是在父级路由的下面去追加新路径
                {
                    name: "loginByForm",
                    component: loginByForm,
                    path: "loginByForm"
                }, {
                    name: "loginByqrCode",
                    component: loginByqrCode,
                    path: "loginByqrCode"
                }
            ]
        }, {
            path: "/register",
            component: register,
            name: "reg"
        }
    ]
})

说明：在上面的代码里面，我们看到了在login的路由下在，我们配置了一个children的属性，这一个属性代表它下面的子级路由，这个子级路由的配置与我们之前的router里面的配置大同小异，只是在path的路径这里需要特别注意一下，具体请看代码注释

router-link的相关配置

在router-link当中，它的主要作用就是用来帮我们进行页面跳转的，相当于我们的a标签，同时，我们也看到了，router-link默认情况下，会在页面当中渲染成我们的a标签

active-class

active-class代表了当前这个router-link被激活以后所使用的样式信息，默认的值为 router-link-active

如果你希望改变它的默认值，这个时候，只需要改变它的active-class的属性值就可以了，这个时候，当这个路由被选中激活的时候，就会应用上你的样式信息

<router-link active-class="active" to="/register">注册</router-link>

tag属性

在vue-router里面，router-link默认会被渲染成一个a标签，如果你想把它渲染成一个其它的标签，那么，就请使用tag去改变它的属性值，如下所示：

<router-link tag="span" to="/login">登陆</router-link>

说明：上面代码经过渲染以后，最终得到的标签就是span标签，它虽然被渲染成了span标签，但是，还是具备路由跳转切换的功能

路由重定向

在VueRouter里面，我们可以进行路由的转向，也就是重定向，重定向的方式多种多样，其中，最主要的有以下几种：

通过path重定向
```
{
    path: "/",
    redirect: "/login/loginByForm",
}
```
说明：当路由的地址指向'/'的时候，它就会跳转到/login/loginByForm这个地址，'/'代表了VueRouter的默认启动地址

通过别名重定向

{
    path: "/",
    redirect: {
        name: "loginByForm"
    }
}

通用匹配

当我们的路由地址找不到的时候，我们希望匹配一个默认的路由，这个时候就要进行如下配置
```
{
    path: "*", //没有找到匹配的路由
    redirect: "/register"
}
```

编程式路由

通过刚刚的学习，我们都知道，如果我们要跳转一个路由，我们可以使用router-link的方式进行跳转,可是这样做的局限性非常大，如果假设，我们希望通过js代码的形式进行路由跳转，这个时候，应该怎么操作呢？

为了解决这一个问题，VueRouter就推出了编程式路由，以编程的形式解决路由的跳转问题

编程式路由的跳转常用的两种方式如下：

通过path去跳转

this.$router.push({
    path: "/login"
});

通过name去跳转

this.$router.push({
    name: "login"
});

上面的两种方式都可以进行路由的跳转，但是它们的应用点不一样，区别主要是在路由的传值方式不一样

路由传值

在前端的路由里面，我们在切换路由的时候，也相当于切换了组件（切换了页面），页面与页面之前有时候需要做到传值，这个时候，在VueRouter里面，两个路由之间做跳转的时候，如何进行传值呢？

VueRouter的路由传值有两种试

query传值。这一种传值方式，我们叫做get传值

传值的路由
```
this.$router.push({
    path: "/login?uname=" + this.userName
});
```
传值路由第二种写法
```
this.$router.push({
    path: "/login",
    query: {
        uname: this.userName
    }
});
```
接收值的路由
```
console.log("接收过来的值为：" + this.$route.query.uname);
```
因为传值的路由使用的是get方式的传值，这种传值方式在VueRouter叫query传值，所以，在下面的路由里面取值的时候，使用this.$route.query.参数名
params传值。路径变量传值，可以转换成post传值

params路由传值可以把它理解成我们express路径变量传值，它也可以放在地址栏里面进行传递

传值路由第一种写法
```
this.$router.push({
    path: "/login/" + this.userName
});
```
传值路由的第二种写法
```
this.$router.push({
    name: "login",
    params: {
        uname: this.userName
    }
});
```
接收值的路由
```
console.log("接收过来的值为：" + this.$route.params.uname);
```
注意：在使用params传递参数的时候，我们需要在router的对象里面，找到当前的这个路由，然后去更改它的path
```
 {
     path: "/login/:uname", //代表当前url跳转的路径
     component: login, //代表在当前这个路径下面，我们如何显示组件（显示那一个组件）
     name: "login" //给当前路由取一个别名
 }
```
上面的path后面是/login/:uname,这一个是我们的一个路径变量，前面的login代表路由，而后面:uname代表的是变量
通过第二种方式的params传值，引伸出post原理传值

params本身确实是会把参数添加到url地址栏，但是，我们可以让它不显示出来，使用下面的方法，我们就可以把它去掉，不显示，从而内容不经过浏览器地址栏处理，直接做到传值。

它只是把路由对象里面的路径变量给去掉了，直接使用的params传值

注意事项：因为它把path里面的路径变量去掉了，所以不能使用path去传递值了
```
this.$router.push({
    path: "/login/" + this.userName
});
//现在上面的方法就不可用了，而必须使用下面的方法 
```
```
this.$router.push({
    name: "login",
    params: {
        uname: this.userName
    }
});
```
下面的这种写法，变量没有显示在路径里面，只是通过params存储，params传递，不再经过url了，这个时候，我们就可以传递大家数据，同时，也可以保证数据安全

这一个就是vue当中变相去处理post传值

路由滚动行为

::: tip
当我们切换路由的时候，想要滚动到页面的顶部或者保持原有的滚动位置，就像重新加载页面那样。Vue Router可以轻松帮我们实现这个效果。但这个功能只在支持history.pushState的浏览器中使用。
:::

滚动到页面顶部

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 滚动到页面顶部
    return {
      x: 0,
      y: 0
    }
  }
})

滚动到前进后退页面原始的位置

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 滚动到前进后退页面原始的位置
    if(savedPosition) {
      return savedPosition
    } else {
      return { x:0, y: 0 }
    }
  }
})

滚动到锚点位置

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // 滚动到锚点位置
    if(to.hash) {
      return {
        selector: to.hash
      }
    } 
  }
})

路由懒加载

::: tip
随着项目的体积增大，打包后的包也越来越大，我们希望只有当我们访问某一个路由时，其对应的组件才被加载，这样就更好。要实现这一想法，需要集合Vue的异步组件和webpack代码分隔的功能。
:::

var router = new VueRouter({
  routes: [
    { path: '/order', component: () => import('@/components/order.vue') },
    { path: '/address', component: () => import('@/components/address.vue') },
    { path: '/avatar', component: () => import('@/components/avatar.vue') }
  ]
})

目录CONTENT

Vue基础第四课