【Vue知识点】路由router详解

vue-router的定义

   vue-router是vue的一个插件库，专门用来实现SPA应用

• SPA应用就是单页的web应用（single page web application）
  SPA应用的特点是：
     1.整个应用只有一个完整的页面
     2.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
     3.数据需要通过ajax请求获取。

什么是route（路由）？

   路由是负责将进入的浏览器请求映射到特定的组件代码中。 即决定了让谁去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源（一个路由就是一组映射关系（key-value））。路由不包含在vue中，是一个插件，需要单独下载

   在前端中路由中的value是component，用于展示页面内容；key指的是路径。前端路由工作过程：当浏览器的路径改变时，对应的组件就会展示在页面某区域中。

vue-router的使用

vue-router中的一些常用的配置属性：
   mode：配置路由模式，默认为hash，url很丑，可以修改为history，但是需要服务端的支持；
   redirect：重定向，可以设置默认页面；
   linkActiveClass：设置router-link激活样式；

1.由于路由不包含在vue中，是一个插件，需要单独下载，安装vue-router：

• 命令：npm i vue-router@3(注意：不加@3安装的是4.x版本的路由，vue2只支持3.x版本路由，vue3才支持4.x版本的路由)

2.在src文件夹下创建一个route文件包含一个idnex.js的文件

再在main.js中引入并注册全局路由

3.在route文件夹下的index.js中应用VueRouter插件，并为组件添加路由配置项

4.使用一个自定义组件 router-link 来实现跳转，to的位置为你想要跳转的组件链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码

5.再在你想要展现跳转组件的位置上添加router-view标签来展示跳转组件

如何区别 $router与 $route

$router
   router是VueRouter的实例方法，相当于一个全局的路由器对象，作用是进行路由跳转的！就像jQuery里的window.location一样，起到的是导航的作用。里面含有很多属性和子对象，例如history对象，导航到不同url，可以使用this.

$route
   route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、meta、path、hash、query、params、fullPath、matched、redirectedFrom等

路由的跳转方式

声明式路由

   声明式路由就是通过router-link组件跳转，router-view组件展示跳转组件即可

路由&过渡
路由可以结合过渡效果使用；使用<transition></transition>将<router-view></router-view>包裹住，再写样式即可。

vue-router命名视图

   命名视图简单来说就是在一个页面同时使用多个组件，多个视图同时存在一个路径之中，这时候就需要多写几个router-view了，把不同的router-view设置不同的name，在index.js中设置name对应的组件以及路径。
官网的例子：在需要展现组件的位置多写几个router-view

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

在route文件下的index.js中，一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

routes: [
    {
   
      path: '/',
      components: {
   
        default: Home,
        // LeftSide