【Vue2.0】黑马课程笔记（四）Vue-router_黑马vue课程笔记路由-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36932169/article/details/105366599

1 路由的基本概念与原理

路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由

1.1 后端路由：

概念：根据不同的用户URL请求，返回不同的内容。
本质：URL请求地址与服务器资源之间的对应关系。是由服务器端进行实现，并完成资源的分发

1.2 SPA (Single Page Application)

后端渲染（存在性能问题）
Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作)
SPA(Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)
在实现SPA过程中，最核心的技术点就是前端路由

1.3 前端路由

是依靠hash值(锚链接)的变化进行实现

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由
概念：根据不同的事件来显示不同的页面内容，
本质：用户事件与事件处理函数之间的对应关系。前端路由主要做的事情就是监听事件并分发执行事件处理函数
简单使用：前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换），核心实现依靠一个事件，即监听hash值变化的事件
```
  // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
  window.onhashchange = function() {
  // 通过 location.hash 获取到最新的 hash 值
 }
```

思路：
1.在页面中有一个vue实例对象，vue实例对象中有四个组件，分别是tab栏切换需要显示的组件内容，在页面中有四个超链接。
2.当我们点击这些超链接的时候，就会改变url地址中的hash值，当hash值被改变时，就会触发onhashchange事件。在触发onhashchange事件的时候，我们根据hash值来让不同的组件进行显示

    <body>
        <!-- 被 vue 实例控制的 div 区域 -->
        <div id="app">
        <!-- 切换组件的超链接 -->
        <a href="#/zhuye">主页</a> 
        <a href="#/keji">科技</a> 
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
        <!-- 可以把 component 标签当做是【组件的占位符】 -->
        <component :is="comName"></component>
        </div>

        <script>
        // #region 定义需要被切换的 4 个组件
        // 主页组件
        const zhuye = {
   
            template: '<h1>主页信息</h1>'
        }
        // 科技组件
        const keji = {
   
            template: '<h1>科技信息</h1>'
        }
        // 财经组件
        const caijing = {
   
            template: '<h1>财经信息</h1>'
        }
        // 娱乐组件
        const yule = {
   
            template: '<h1>娱乐信息</h1>'
        }
        // #endregion

        // #region vue 实例对象
        const vm = new Vue({
   
            el: '#app',
            data: {
   
            comName: 'zhuye'
            },
            // 注册私有组件
            components: {
   
            zhuye,
            keji,
            caijing,
            yule
            }
        })
        // #endregion

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
   
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch(location.hash.slice(1)){
   
            case '/zhuye':
                vm.comName = 'zhuye'
            break
            case '/keji':
                vm.comName = 'keji'
            break
            case '/caijing':
                vm.comName = 'caijing'
            break
            case '/yule':
                vm.comName = 'yule'
            break
            }
        }
        </script>
    </body>

在这里插入图片描述

2 Vue-router的基本使用

2.1 Vue-router简介

它是一个Vue.js官方提供的路由管理器。( 官网链接)是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
Vue Router的特性：
- 支持H5历史模式或者hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
- 支持路由导航守卫
- 支持路由过渡动画特效
- 支持路由懒加载
- 支持路由滚动行为

2.2 Vue Router的使用步骤(导入js)

1.导入js文件
2.添加路由链接
3.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
4.定义路由组件
5.配置路由规则并创建路由实例
6.将路由挂载到Vue实例中

1.导入js文件
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

2.添加路由链接:<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，
to属性的值会被渲染为#开头的hash地址
默认情况下，Vue 使用 a标签来渲染 router-link标签，可以通过router-link标签 tag 属性来指定用什么标签渲染
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

3.添加路由填充位（路由占位符）， 将来通过路由规则匹配到的组件，将会被渲染到router -view所在的位置。
<router-view></router-view>

4.定义路由组件
var User = {
    template:"<div>This is User</div>" }
var Login = {