Vue路由（Vue-router）

一、什么是路由？

• 路由是通过互联的网络把信息从源地址传输到目的地址的活动
• 路由中有个非常重要的概念叫路由表，本质上就是一个映射表，决定了数据包的指向。

二、什么是前端渲染，什么是后端渲染（服务端渲染）？

（1）后端路由

• 早期网页，用的基本都是后端渲染。当时没有js，用的是（jsp/php），后端渲染对seo优化要好一些，浏览器输入网址，就会把url发到服务器，服务器拿到地址以后，早期会进行一个解析，在后台通过一个jsp的技术，会把网页给你写好，里面包含html和css以及一些java代码。java代码作用就是从数据库读取数据，并且动态的放在页面中，也就是说在浏览器没有呈现页面以前，页面就已经生成了。生成的页面直接传给浏览器，传给浏览器的页面只有html和css，这就是最早期的页面。
• 以上的官方解释就是：
  1.早期的网站开发，整个HTML页面是由服务器来渲染的。
  2.服务器直接渲染好对应的html页面，返回给客户端展示。
  3.一个页面有自己对应的网址，也就是url，url会发送到服务器，服务器会通过正则对该url进行匹配，并且交给一个Controller进行处理。
  4.Controller进行各种处理，最终生成HTML或者数据，返回给前端，这就完成了一个I/O操作。
  以上这种操作就是后端路由
  1.当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将页面返回给客户端，这种情况下渲染好的页面，不需要单独加载任何的js和css，可以直接交给浏览器显示，这样也有利于seo优化。
• 后端路由的缺点：
  1.整个页面的模块都需要后端人员编写和维护。
  2.前端开发人员如果要开发页面，需要通过php/java等语言来编写页面代码。
  3.通常情况下html代码和数据以及对应的逻辑会混在一起，编写和维护都是非常糟糕的事情。

（2）前后端分离阶段

• 这个阶段后端只负责提供数据，不负责任何阶段的内容。
• 随着ajax的出现，有了前后端分离的概念，后端只提供api接口来返回数据，前端通过ajax获取数据，并且可以通过js将数据渲染到页面中。
• 这样做的优点就是前后端责任清晰，后端专注于数据上，前端专注于交互和可视化上。
• 并且当移动端（ios/安卓）出现后，后端不需要进行任何的处理，依然使用之前的一套api即可。目前很多网站依然使用这种模式开发。

（3）单页面富应用阶段

• SPA页面最主要的特点就是在前后端分离的基础上加上了一层前端路由，也就是前端老维护一套路由的规则。

（4）前端路由

• 前端路由的核心是改变url整个页面不刷新。

三、vue-router安装和配置

安装：

npm install vue-router --save

• 在模块化工程中使用它（因为它是一个插件，所以可以通过Vue.use()来安装路由功能）
  1.导入路由对象，并且调用Vue.use(VueRouter)
  2.创建路由实例，并且转入路由映射配置
  3.在Vue实例中挂载创建的路由实例
• 在router文件夹中创建一个index.js，导入vue-router
  1.Vue.use(VueRouter)

const router = new VueRouter({
  routes: [] // 路由的映射关系
})

然后我们在main.js中挂载一下router就可以搭好路由的基本配置了，下面我们就可以在routes中设置路由的映射关系了。

• 路由的映射关系：

const routes = [
  {
    path: '/home',
    component: null
  },
  {
     path: '/about',
     component: null
  }
]

使用vue-router的步骤

1.创建路由组件
2.配置路由映射：组件和路径的映射关系
3.使用路由：通过<router-link>和<router-view>

• router-link 该标签是一个路由内置的组件，会被渲染成a标签。
• router-view 该标签会根据当前的路径，动态渲染出不同的组件
• 网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等，会和router-view在同一个等级。
• 在路由切换时，切换的是router-view挂载的组件，其他内容不会发生改变。

路由的默认值改为history模式

• 默认情况下就是hash模式，也就是说在路径中带着#，显得不是很专业。
  怎么修改呢？

const router = new VueRouter({
  routes: [], // 路由的映射关系
  mode: 'history'  // 配置这个属性以后，就可以实现把默认的hash模式改为history模式。
})

• 通过上面的配置，此时就会发现路径中不会带有#这样的hash格式了。

router-link补充

• to属性，用于跳转指定的路径
  <router-link to='/home'></router-link>
• tag属性，可以指定router-link之后渲染成什么组件，比如下面的代码会被渲染成一个button组件。
  <router-link tag='button'></router-link>
• replace属性，replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中。
  <router-link tag='button' replace></router-link>
• active-class属性，当router-link对应的路由匹配成功时，会自动给当前元素一个router-link-active的class，设置active-class可以修改默认名称。
  在进行高亮显示的导航菜单或者底部的tabbar时，会使用到该类。
  但是通常不会修改该类，会直接使用默认的router-link-active即可。
  <router-link tag='button' replace active-class='active'></router-link>
  这里也可以全局修改默认的router-link-active类，通过修改路由相关配置文件index.js，增加一个linkActiveClass就可以实现对这个类名称的自定义。

const router = new VueRouter({
  routes: [], // 路由的映射关系
  mode: 'history',
  linkActiveClass: 'active'
})

通过代码跳转路由

• 如果我们不通过router-link的to属性去跳转到指定的路由，那么我们也可以通过js去控制路由的跳转
  this.$router.push('/home')或者this.$router.replace('/home')，push带有返回按钮

四、动态路由

• 有时候一个页面的path是不确定的，有时候后面会跟着一些参数，这种路径我们称之为动态路由。

const routes = [
  {
    path: '/home',
    component: null
  },
  {
     path: '/about',
     component: null
  },
  {
    path: '/user/:id',// 这里的id就是要配置的动态路由
    component: null
  }
]

• $route指的是当前哪个路由处于活跃状态

this.$route.params.id通过这种方式我们就可以拿到url中的参数值。

• $router指的是我们在入口出new的router对象

五、路由的懒加载

• 当打包构建应用时，js包会变得非常大，影响页面的加载，如果我们能把不同路由对应的组件分成不同的代码块，然后当路由访问时才加载对应组件，这样就比较高效了。这时候就需要用到路由的懒加载。
  具体代码写法如下：

const Home = () => import('../components/Home');
const routes = [
    {
        path: '/home',
        component:  Home
    }
]

六、路由的嵌套

• 嵌套路由是一个很常见的功能，比如我们在home页面中，希望通过/home/news和/home/message访问一些内容
• 一个路径映射一个组件，访问这两个路径，也会分别渲染这两个组件

实现嵌套路由的两个步骤

1.创建对应的子组件，并且在路由映射中配置对应的子路由。
2.在组件内部使用<router-view>标签。

const Home = () => import('../components/Home');
const HomeNews = () => import('../components/HomeNews');
const HomeMessage = () => import('../components/HomeMessage ');
const routes = [
    {
        path: '/home',
        component:  Home,
        children: [
            {
                path: '',
                redirect: 'news'// 默认显示新闻页
            },
            {
                path: 'news',
                component: HomeNews
            },
            {
                 path: 'message',
                 component: HomeMessage
            }
        ]
    }
]

七、路由参数传递

• 传递路由有两种方式：params和query
  1.params类型：
  （1）配置路由格式：/router/:id
  （2）传递方式：在path后面跟上对应的值
  （3）传递后形成的路径：/router/123,/router/abc

const routes = [
  {
    path: '/profile:id',
    component: 'Profile'
  }
]

页面中取出某个参数：$route.params.id
2.query类型：
（1）配置路由格式：/router，也就是普通的配置
（2）传递的方式：对象中使用query的key作为传递方式
（3）传递后的路径：/router?id=123

<router-link :to={ path: '/router', query: { name: 'aaa', age: 18 }}></router-link>

页面中取出某个参数：$route.query.name
3.通过点击事件实现路由传递参数

methods: {
  // params方式
  userClick () {
    this.$router.push('/user/' + this.userId)
  },
// query 方式
  proFileClick () {
    this.$router.push({
      path:'/profile',
      query: {
        name: 'kobe',
        age: 18
      }
    })
  },
}

4.$route 和 $router的区别

• $route 指的是当前活跃的路由，$router指的是路由本身，里面包含了很多方法。
• 所有的组件都继承自vue的原型

八、vue-router的全局导航守卫

1. 全局守卫

• 意思就是对路由来回跳转的时候进行一些监听，在跳转的过程中有可能要做其他的事情。
• 以下代码实现的是页面跳转变换页面对应的title:

router.beforeEach((to, from, next) => {
  // beforeEach叫做前置守卫(hook)
  // meta 元数据（描述数据的数据）
  document.title = to.matched[0].meta.title;
  next('/login')
  // next可用于判断是否登录，没有登录直接跳转到登录页面
})

导航钩子的三个参数解析：

• to:即将要进入的目标的路由对象
• from:当前导航即将要离开的路由对象
• next: 调用该方法后，才能进入下一个钩子

补充：

• afterEach()后置守卫,路由跳转结束后要做的一些事情。

router.afterEach((to, from) =>  {
  console.log('aaa');
})

2. 路由独享守卫
3. 组件内守卫

九、keep-alive以及其他问题

• keep-alive 是Vue内置的一个组件，可以使被包含的组件保留状态，或者避免重新渲染。

<keep-alive>
  <roouter-view />
</keep-alive>

• keep-alive有两个重要的属性：
  1.include - 字符串或者正则表达，只有匹配的组件才会被缓存
  2.exclude - 字符串或者正则表达，任何匹配的组件都不会被缓存

<keep-alive exclude='Profile,User'>
// 上面两个组件之间最好不要加空格，会出现问题
  <roouter-view />
</keep-alive>

activated/deactivated只有在页面使用了keep-alive保持状态的时候才会起作用

注：

const router = new VueRouter({
  routes,
  mode: 'histroy', 
  // 这里使用history模式，代替hash模式，这样的话在路径中就不会出现类似hash的路径格式。
})