目录

一、介绍路由

1、路由是什么

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

2、为什么要使用路由

3、主要用途

二、安装路由

1、安装命令

2、配置文件

3、在main.js 中进行挂载

三、案例展示

1、案例效果

2、代码展示

3、内容补充

4、几个注意点

一、介绍路由

1、路由是什么

Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制器（的方法，并传递参数）。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。

官方说法：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

2、为什么要使用路由

在传统的web开发中每一个请求地址都会请求服务器来进行处理，但是用户有些操作则无需请求服务器，直接页面端修改下逻辑就能达到目的，在这种方式下最好的方法是使用路由，因为使用路由时，URL会随着改变，用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人，这种方式对于搜索引擎和用户来说都是友好的

3、主要用途

多应用于spa(single page web application)
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

二、安装路由

1、安装命令

npm i vue-router@3 

这里需要注意一下，我们的脚手架是有2和3版本的，同样，路由也有不同的版本，现在主要用的是3和4版本，如果我们是vue2的话那就装路由3版本，vue3的话就装4版本。

2、配置文件

（1）我们需要在我们创建的项目中的src根目录创建router目录，在目录中创建                        index.js， 该文件专门用于创建整个应用的路由器

在这文件中写入以下代码

（2）引入vue

        import Vue from 'vue';

（3）导入vue-router

        import VueRouter from 'vue-router'

（4）应用插件

        Vue.use(VueRouter)

（5）创建router规则对象

        const routes = [

        ]

（6）创建router

        const router = new VueRouter({

        routes

        })

（7）导出router

        export default router

3、在main.js 中进行挂载

import Vue from 'vue'
import App from './App.vue'
import router from './router'     //引入router
// Vue.config.productionTip = falsenew Vue({render: h => h(App),router                 //挂载router
}).$mount('#app')

当准备好这些，我们就可以开始写我们的代码咯

三、案例展示

（本案例是来自于尚硅谷vue教程中的案例，感兴趣的小伙伴可以去小破站搜索相关视频学习哦）

1、案例效果

根据上面的动态图展示，我不知道小伙伴们有没有发现不同之处，就是我的页面一直在随着我鼠标点击而进行变化，但是并没有进行跳转页面的操作，之前我们实现这样的效果，页面都会刷新和跳转，这就是路由单。页面的好处，不需要一直去加载，去请求，在页面上就能完成跳转。

2、代码展示

App.ve页面h

About组件

最最最最重要的文件来了，那就是我们router下面的index.js 文件

import Vue from 'vue';
//导入vue-router
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
//应用插件
Vue.use(VueRouter)//创建router规则对象
const routes = [
]
//创建router
const router = new VueRouter({routes:[{path:'/about',component:About },{path:'/home',component:Home}]
})//导出router
export default router

3、内容补充

在代码中我们能看到几个陌生的组件，那他们都是什么意思呢，不要着急，我一个一个来为大家解释

 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的  标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；就比如我们案例中的点击的时候背景颜色的切换

指定展示位置，就是我们路由组件的展示位置