转载声明：文章来源：https://blog.csdn.net/weixin_53614367/article/details/123666638
1.路由就是一组key – value的对应关系
2.多个路由，需要经过管理者的管理
3.路由的存在就是为了实现单页面应用
对spa应用的理解
1.单页Web应用（single page web application, SPA）
2.整个应用只有一个完整的页面
3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4.数据需要通过ajax请求获取
路由的理解
什么是路由
1.一个路由就是一组映射关系（key---value）
2.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文件，并配置路由：
//该页面用于创建整个应用的路由管理者router
import VueRouter from "vue-router";
//引入对应的路由组件
import XXX from 'XXX'
import XXX from 'XXX'
//创建并暴露一个router
export default new VueRouter({
routes:[
{
path:'/跳转路径',
component:组件名称
},
{
path:'/跳转路径',
component:组件名称
},
]
})第二步
在main.js中配置路由：
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//应用VueRouter
Vue.use(VueRouter)
//创建vm
new 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.js.
//该文件用于创建整个应用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";
//引入路由组件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
//创建并暴露一个VueRouter
export default new VueRouter({
routes:[
//配置路由路径和路由组件
{
//这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混
path:'/TestA',
component:TestA //要跳转到的组件
},
{
path:'/TestB',
component:TestB
}
]
})在main.js中配置路由：
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-router
import VueRouter from 'vue-router'
//引入路由配置
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用VueRouter
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router //配置router
})在一般组件中设置路由切换：
components/BannerA.vue:
<template>
<div>
<!-- 学习路由的使用 -->
<h2>学习路由的使用</h2>
<!-- 实现路由的切换 -->
<!-- 为了能区分开当前所处路由，可以使用active-class属性给标签内容高亮 -->
<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中的配置如下：
//该页面用于创建整个应用的路由管理者router
import VueRouter from "vue-router";
//引入对应的路由组件
import XXX from 'XXX'
import XXX from 'XXX'
//创建并暴露一个router
export 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-router
import VueRouter from "vue-router";
//引入路由组件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二级路由组件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'
//创建并暴露一个VueRouter
export 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的初学者能有一定帮助吧
帖子还没人回复快来抢沙发