什么是路由

百度的官方解释是：路由（routing) 是指分组从源到目的地时，决定端到端路径的网络范围的进程。在 WEB 开发中，路由，简单来说，就是URL到函数的映射。
路由这个概念最早来源于后端，因为早期的网页都是服务端渲染的。比如：JSP，PHP，ASP 等语言，都是直接返回渲染好的 html 给客户端显示。于是，路由又分为后端路由 和 前端路由

后端路由

在后端，路由映射表中就是不同的URL地址与不同的html + css + 后端数据之间的映射

前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 不同返回不同的页面来实现 \

前端路由主要是有两种模式：

hash: 带有hash的前端路由。
优点:兼容性高。
缺点:URL带有#号不好看
history: 不带hash的前端路由。
优点:URL不带#号，好看。
缺点:既需要浏览器支持也需要后端服务器支持 \

前端路由带来的最明显的好处就是，地址栏URL的跳转不会白屏了 —— 这也得益于客户端渲染带来的好处。
这里着重讲解Vue中的路由

Vue中的路由 -- vue-router

什么是vue-router

vue-router是vue的一个插件，专门用来实现SPA应用。SPA也就是单页Web应用，特点是：整个应用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过ajax请求获取。

vue-router的基本使用

安装

因为 Vue 分为 Vue2 和 Vue3 ,不同版本的 Vue 需要安装不同版本的 vue-router ，否则会报错。 Vue2安装vue-router ：npm i vue-router@3
Vue3安装vue-router ：npm i vue-router

配置

首先需要在main.js中引入vue-router 具体代码如下：

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  store,
  render: h => h(App),
  mounted(){
    console.log(this)
  },
  router
}).$mount('#app')

引入之后需要配置router文件具体代码如下：

import VueRouter from 'vue-router'
import HelloWorld from '../pages/HelloWorld'
const router = new VueRouter({
    routes: [{
        path: '/home',
        component: HelloWorld,
    }]
})

export default router

配置完router文件后再讲router文件引入到main.js中。

展示

使用<router-link to="url"></router-link>来进行路由切换,其中的to属性写要切换到的url地址使用<router-view></router-view>来展示所要切换到的页面内容

这样就实现了一个简单的路由

注意点

路由组件通常存放在pages文件夹中，一般的静态组价存放在components文件夹中
通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载
每个组件都有其自己的$route属性，其中存放着组件自己的路由信息
一个项目中只有一个router，可以通过$router属性获取到

总结

本文主要简单介绍了一下路由的相关概念以及对vue-router的安装配置做了简单的讲解。

前端笔记---Vue 路由（一） | 青训营笔记