Vue学习之旅Part9：使用vue-router实现前端路由和参数传递

一、概念

1、什么是路由

简单来说 路由就是URL到函数的映射
访问的URL会映射到相应的函数里 然后由相应的函数来决定返回给这个URL什么东西
路由进行的是一个匹配的工作

2、后端路由和前端路由

• 1、后端路由：
  对于普通网站 所有超链接都是URL地址 所有的URL地址都对应服务器上对应的资源
  每个前端的资源都对应着一个URL地址 由后端路由进行分发
  浏览器在地址栏中切换不同的url时每次都会向后台服务器发出请求 然后服务器响应请求 在后台拼接html文件传给前端显示 从而返回不同的页面
  这意味着 浏览器会刷新页面 前后端不分离

• 2、前端路由：
  对于单页面应用程序来说 通过URL中的hash(#号)来实现不同页面之间的切换 页面不刷新
  例如：www.xxx.com#/xxx这种格式
  同时 hash有一个特点：HTTP请求中不会包含hash相关的内容
  类似于锚点的概念
  在第一个#后面出现的任何字符都会被浏览器解读为位置标识符 这意味着 这些字符都不会被发送到服务器端
  前端路由只是单单改变#后的内容 浏览器只会前往相应位置 不会重新加载网页 浏览器不会重新向服务器请求页面

在单页面应用程序中 这种通过hash改变来切换页面的方式称作前端路由
(和后端路由形成一个区别 由前端来负责路由的工作)

---

二、基本使用

1、引入

vue-router是Vue.js官方的路由管理器

cdn引入：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

vue-router依赖于Vue 因此引入vue-router的顺序必须在Vue之后

当导入vue-router包之后 会自动使用Hash路由
URL地址后面会自动添加：#/

2、创建路由规则对象 定义路由的匹配规则：

当导入vue-router包之后 在window全局对象中就有了一个路由的构造函数 名为VueRouter

①、用new VueRouter()创建一个路由规则对象 并且在new的时候 为构造函数传递一个配置对象

配置对象里面是路由匹配规则 每个路由匹配规则都是一个对象

在该对象上 有两个必填的属性：
path 即监听的路由连接 还有component 即对应的要显示的组件
例：{path:"/login",component:login}

②、然后 将该路由规则对象注册到Vue实例的router属性中

这样 当匹配到了前面的路由连接之后 即在页面展示出后面对应的组件 从而实现路由

<script>
    // 组件模板对象1
    var login={
        template:"<h1>登录</h1>"
    }
    // 组件模板对象2
    var register={
        template:"<h1>注册</h1>"
    }

    // 创建路由规则对象
    var routerObj=new VueRouter({
        // 定义路由匹配规则
        routes:[
            // component属性的值是模板对象 不是组件引用名称 不加引号
            {path:"/login",component:login},
            {path:"/register",component:register}
        ]
    })

    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{},
       // 将路由规则对象注册到Vue实例上 监听URL地址的变化然后根据规则展示对应的组件
       router:routerObj
    });
</script>

3、使用<router-view>标签占位符 将路由规则匹配到的组件展示到该标签上：

vue-router提供了一个<router-view>元素 用于占位
路由规则匹配到的组件会展示到该标签上

<div id="app">
    <!-- 跳转的地址前面必须加上井号[#] 因为跳转到的并不是真实页面 而是锚点路由 -->
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    
    <!-- 路由规则匹配到的组件会展示到该标签上 -->
    <router-view></router-view>
</div>

执行过程：
用户点击页面上的超链接 然后URL地址会被修改
由于路由对象是注册到Vue实例上的 在修改完URL地址后 路由会自动监听到URL地址的改变 随即进行路由地址的匹配
若能匹配到对应的规则 则展示对应的组件到页面的<router-view>占位符上

---

三、<router-link>设置路由链接

Vue提供了<router-link>标签 使用其中的to属性来指定要路由的连接地址
<router-link>标签在页面中默认渲染为a标签

例：

<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>

就等于：

<a href="#/login">登录</a>
<a href="#/register">注册</a>

可使用tag属性指定要渲染成的标签：

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

---

四、redirect路由重定向

监听[/]根路径 一进入页面即显示指定的组件

var routerObj=new VueRouter({
            // 定义路由匹配规则
            routes:[
                {path:"/",component:login},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })

此方法虽然可以实现 但在第一次进入页面时 显示的路由锚点还是根路径
此时 通过指定redirect的路径可实现真正的重定向：{path:"/",redirect:"/login"}

var routerObj=new VueRouter({
            // 定义路由匹配规则
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })

需要注意的是 此处的redirect和服务端的redirect不同 此处的重定向是客户端修改Hash值从而修改跳转的地址

---

五、高亮效果

当目标路由成功激活时 链接元素会自动设置一个表示激活的CSS类名
在当前加载的组件上 会有router-link-active这个类

那么 只要在该类上添加样式 即可实现高亮效果：

<style>
    .router-link-active
    {
        color: aqua;
        font-size: 40px;
    }
</style>

该类名还可自己指定 在路由的构造选项linkActiveClass中指定：

<script>
var routerObj=new VueRouter({
            routes:[
                {path:"/",redirect:"/login"},
                {path:"/login",component:login},
                {path:"/register",component:register}
            ],
            // 自定义激活的类名
            linkActiveClass:"myactiveclass"
        })
</script>

<style>
    .myactiveclass
    {
        color: aqua;
        font-size: 40px;
    }
</style>

---

六、参数传递

参数传递 就是在路由组件中获取到请求的URL携带的参数

有两种方式可实现参数的传递：
query方式 和 params方式

1、query方式

使用$route可获取当前路由对象 里面有一个query属性
query属性里面就是携带的全部查询参数

<router-link to="/login?id=1">登录</router-link>

<script>
    var login={
        template:"<h1>登录</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

那么 用$route.query.属性名来获取即可
可以传递多个参数：

<router-link to="/login?id=1&name=陈涛">登录</router-link>

<script>
    var login={
    	// 用 $route.query.属性名 来获取参数
        template:"<h1>登录 - {{$route.query.id}} - {{$route.query.name}}</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

2、params方式

使用$route获取的当前路由对象 里还有一个params属性
里面就是携带的查询参数
vue-router内部会将path(请求路径)预解析成正则表达式 然后用该正则表达式解析成fullPath

该方式请求的时候 以斜杠分层：

<router-link to="/login/1">登录</router-link>

<script>
  var login={
        template:"<h1>登录</h1>",
        created()
        {
            // 组件的生命周期函数
            console.log(this.$route);
        }
    }
</script>

params属性里就有传入的参数：

用$route.params.属性名来获取
可以传递多个参数：

<router-link to="/login/1/陈涛">登录</router-link>

<script>
    var login={
        template:"<h1>登录 - {{$route.params.id}} - {{$route.params.name}}</h1>",
        created()
        {
            console.log(this.$route);
        }
    }
</script>

---