【vue路由（router）的基本使用】
vue路由（router）的基本使用
- 对spa应用的理解
- 路由的理解
-
- 什么是路由
- router和route
- 路由的分类
-
- 后端路由
- 前端路由
- 路由的安装
- 配置和使用路由
-
- 第一步
- 第二步
- 第三步
- 具体实例代码
- 多级路由
-
- 具体实例代码
- 总结
- 路由就是一组key – value的对应关系
- 多个路由，需要经过管理者的管理
- 路由的存在就是为了实现单页面应用
对spa应用的理解
- 单页Web应用
（single page web application, SPA） - 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
- 数据需要通过ajax请求获取
路由的理解
什么是路由
- 一个路由就是一组映射关系
（key---value） - key为路径，value可能是function或Component
router和route
router：中文直译是“路由器的意思”，简单来说就是路由（route）的管理者
route：指的就是单个路由或者某一个路由
路由的分类
后端路由
- 理解：value是function，用于处理客户端提交的请求
- 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由
- 理解：value是component，用于展示页面内容
- 工作过程：当浏览器的路径改变时，对应的组件就会显示
路由的安装
路由的安装也是要要借助Vue脚手架，通过npm命令进行安装
值得注意的是：
一般安装vue-router会安装最新版本，而Vue-router最新版本为4，但Vue-router4只能在Vue3中使用，所以Vue2只能用Vue-router3
命令如下：
npm i vue-router@3配置和使用路由
第一步
在src文件夹下创建router/index.js文件，并配置路由：
//该页面用于创建整个应用的路由管理者routerimport VueRouter from "vue-router";//引入对应的路由组件import XXX from 'XXX'import XXX from 'XXX'//创建并暴露一个routerexport default new VueRouter({ routes:[ { path:'/跳转路径', component:组件名称 }, { path:'/跳转路径', component:组件名称 }, ]})第二步
在main.js中配置路由：
//引入VueRouterimport VueRouter from 'vue-router'//引入路由器import router from './router'//应用VueRouterVue.use(VueRouter)//创建vmnew Vue({el:'#app',render: h => h(App),router:router})第三步
在对应的组件中使用路由：
实现切换：
<router-link to="/跳转路径">跳转</router-link>指定位置展示路由组件：
<router-view><router-view>值得注意的几个点：
1.一般情况下，我们在使用路由时，用到的路由组件通常会在src文件夹下新创建一个名为pages的文件夹来存放路由组件，而一般的组件则放在components中。
2.路由组件在被切换时，原本的路由是已经被销毁了的，只有再次点击对应的导航或路由切换按钮，则该路由组件才会再次被挂载。
3.每个路由组件都有自己的$route属性，里面存储该路由组件的信息
4.一个应用只有一个$router属性，用于管理所有路由
具体实例代码
创建路由组件文件：src/pages/xxxx.
TestA.vue:
<template> <div> <h4>我是内容一</h4> </div></template><script>export default { name:'TestA'}</script><style scoped>h4{ text-align: center;}</style>TestB.vue:
<template> <div> <h4>我是内容二</h4> </div></template><script>export default { name:'TestB',}</script><style scoped>h4{ text-align: center;}</style>创建路由配置文件src/router/index.vue.
//该文件用于创建整个应用的router//首先，需要引用vue-routerimport VueRouter from "vue-router";//引入路由组件import TestA from '../pages/TestA'import TestB from '../pages/TestB'//创建并暴露一个VueRouterexport default new VueRouter({ routes:[ //配置路由路径和路由组件 { //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混 path:'/TestA', component:TestA //要跳转到的组件 }, { path:'/TestB', component:TestB } ]})在main.js中配置路由：
//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//引入vue-routerimport VueRouter from 'vue-router'//引入路由配置import router from './router'//关闭Vue的生产提示Vue.config.productionTip = false//应用VueRouterVue.use(VueRouter)//创建vmnew Vue({el:'#app',render: h => h(App),router:router//配置router})在一般组件中设置路由切换：
components/BannerA.vue:
<template> <div> <h2>学习路由的使用</h2> <router-link to="/TestA" active-class="active">导航一</router-link> <router-link to="/TestB" active-class="active">导航二</router-link> </div></template><script>export default { name:'BannerA'}</script><style scoped>h2{ text-align: center;}a{ text-decoration: none;}.active:visited{ color: brown;}</style>在app.vue中展示路由视图：
<template><div class="app"> <BannerA/> <router-view></router-view> </div></template><script>//引入组件import BannerA from './components/BannerA'export default {name:'App', components:{ BannerA }}</script><style scoped>.app{ width: 50%; margin: 0 auto; border: 1px solid rgb(26, 244, 248);}</style>页面初始的时候，是看不见路由组件的
如图：
当鼠标点击导航一，则呈现的就是导航一对应的路由组件，当鼠标点击导航二，则呈现的就是导航二对应的路由组件
如图：
到此，我们已经完成了一个路由的基本简单使用，接下来，我们就开始多级路由的使用
多级路由
在实际开发中，我们不单单会使用到一层路由，有时候会涉及到两层或两层以上的路由，多级路由又称嵌套路由，其实理解起来和一级路由是一个道理，只不过发生了嵌套
多级路由在src/router/index.js中的配置如下：
//该页面用于创建整个应用的路由管理者routerimport VueRouter from "vue-router";//引入对应的路由组件import XXX from 'XXX'import XXX from 'XXX'//创建并暴露一个routerexport default new VueRouter({ routes:[ { path:'/跳转路径', component:组件名称 }, { path:'/跳转路径', component:组件名称, //多级路由通过children配置项配置 children:[{ path:'跳转路径' //注意，只有一级路由路径前加 "/",子路由是不能加 "/"的 component:组件名称, children:[ { path:'跳转路径', component:组件名称 } ]} ] }, ]})对应的在路由组件中的使用
实现路由切换：
<router-link to="/一级路由/二级路由/...">跳转</router-link>指定位置展示：
<router-view></router-view>具体实例代码
main.js、TestA.vue、BannerA.vue中没有改变内容，所以就不在重复展示，内容同上
创建TestBHzw.vue:.
<template> <div> <p> 《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品， 于1997年7月22日在集英社《周刊少年Jump》开始连载。 改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。 </p> </div></template><script>export default { name:'TestBHzw'}</script><style></style>创建TestBHyrz.vue.
<template> <div> <p> 电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画， 2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话； 第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。 </p> </div></template><script>export default { name:'TestBHyrz'}</script><style></style>TestB.vue中的变化：
<template> <div> <h4>我是内容二</h4> <div class="box"> <router-link to="/TestB/TestBHzw" active-class="active">点击查看《海贼王的简介》</router-link> <router-link to="/TestB/TestBHyrz" active-class="active">点击查看《火影忍者的简介》</router-link> <hr> <router-view></router-view> </div> </div></template><script>export default { name:'TestB',}</script><style scoped>h4{ text-align: center;}.box{ text-align: center;}a{ text-decoration: none;}.active:visited{ color: brown;}</style>src/router/index.js中的变化：
//该文件用于创建整个应用的router//首先，需要引用vue-routerimport VueRouter from "vue-router";//引入路由组件import TestA from '../pages/TestA'import TestB from '../pages/TestB'// 引入二级路由组件import TestBHzw from '../pages/TestBHzw'import TestBHyrz from '../pages/TestBHyrz'//创建并暴露一个VueRouterexport default new VueRouter({ routes:[ //配置路由路径和路由组件 { //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混 path:'/TestA', component:TestA //要跳转到的组件 }, { path:'/TestB', component:TestB, // 配置二级路由 children:[ { path:'TestBHzw', //重点注意，不要加 / component:TestBHzw }, { path:'TestBHyrz', component:TestBHyrz } ] } ]})页面效果图：
此时我们处于一级路由的“导航二”下，此时页面是并没有展示二级导航内容的
当鼠标点击对应导航链接后，页面出现对应内容
总结
以上就是我对Vue路由简单使用的一些学习笔记，Vue-Router在实现单页面应用中起到至关重要的作用，所以总的来说还是Vue框架中比较重要的知识点，自己也是在看了尚硅谷的视频之后在此基础上做的学习笔记和总结，希望对Vue的初学者能有一定帮助吧
觉得不错的话记得点赞收藏加关注再走哟！！！