一、什么是Vue的路由器？有什么作用？
（1）什么是路由器
Vue的路由器，即Vue Router，是Vue.js官方提供的路由管理插件，专门用于构建单页面应用（SPA）中的路由系统。SPA应用的特点是整个应用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过ajax请求获取。
（2）Vue Router的主要作用包括：
路由映射：通过将URL映射到指定的组件，实现页面之间的切换和跳转。这样用户在浏览网页时，可以通过点击链接或者浏览器的前进、后退按钮来切换不同的页面，而不需要每次都重新加载整个页面。
嵌套路由：支持定义嵌套的路由关系，意味着可以在一个页面中嵌套多个子页面，并且每个子页面可以有自己的路由配置，实现更复杂的页面结构和功能。
路由参数：允许在路由的URL中传递参数，可以通过动态路由或查询参数的方式传递参数。根据不同的参数渲染不同的页面内容，实现更灵活的页面展示和交互。
总的来说，Vue Router在Vue应用中起到了至关重要的作用，它使得开发者能够更有效地组织和管理应用的页面结构，实现无刷新的页面切换和灵活的参数传递，提升了用户体验和开发效率。
二、引入
这边我们举一个简单的例子，假如我们要看电视剧，我们有频道很多，怎么调呢，通过遥控器才显示到电视上，那么我们的路由器也是这样
频道很多--------》通过遥控器----------》显示电视上
组件很多--------》通过路由器----------》显示到vue的主页面中
步骤：1.创建很多组件---这边我们举几个组件例子：管理员列表组件，科室列表组件，登录组件，主页组件
2.创建路由器
3.主页面
三、必要的js文件
axios.min.js，vue-router.js，vue.js
我把这三个导入了百度网盘，需要自提
链接：https://pan.baidu.com/s/1wpdXaapxh7NKuz0TCrkxkg?pwd=qfo9
提取码：qfo9
四、创建思路讲解
首先，我们先把该需要的包和文件夹创建好，建一个运行的index.html文件，把js该导入的导入，随后创建路由，根据上面提到的创建步骤进行创建对应的组件，这边就举例了登录组件，员工组件以及科室组件，随后写各个组件的内容，由于本次的重点是是实现路由，所以在组件上面就先随便写一些内容，子组件创建完后我们就要创建路由器，就在router包里面建一个index.js里面构建路由器，我们有很多子组件，所以用了路由表来接受，接收可以是集合也可以是数组，里面就写对应的内容，如何创建完就在index.html去调用，通过名字去查找；随后我们需要实现点击某个按钮实现路由的跳转，就引出了三种跳转方式，随后又引入了子路由，大体上就是这样子。
五、代码实现
接下来就是实现路由器的创建和路由器的实现页面跳转的两种情况
这是项目的结构
index.html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 显示屏,要有显示屏才能显示页面 -->
<router-view></router-view>
</div>
<!-- 引入组件 -->
<script src="../views/DepartView.js"></script>
<script src="../views/LoginView.js"></script>
<script src="../views/StaffView.js"></script>
<script src="../views/MainView.js"></script>
<!-- 引入路由器 -->
<script src="../router/index.js"></script>
<script>
var app = new Vue({
el:"#app",
router:router,//这个是与index.js的第三步创建路由器的变量是一样的
data:{
},
})
</script>
</body>
</html>index.js代码，这就是写我们路由器的代码
// 在这里构建路由器
// 引入路由（组件）
// 2.要有路由表
// 路由有很多，所以可以用数组来接收
var routesArr = [
{
name:'login',// name路由名字，自定义
path:"/login",//地址栏上写的那个名称 ==》@RequestMapping("/login")
component:loginView //路由对应的组件
},
{
// 设置一下打开的默认页面，这边默认打开登录页
path:"/",
name:'login',
component:loginView
},
{
path:"/main",
name:"main",
component:mainView,
// 子路由
children:[
{
name:'staff',
path:"/staff",
component:staffView
},
{
name:'depart',// name路由名字，自定义
path:"/depart",//地址栏上写的那个名称 ==》@RequestMapping("/login")
component:departView //路由对应的组件
},
]
}
];
// 3.创建路由器
var router = new VueRouter({
mode:"hash",//路由模式，使用hash哈希模式，还有另一种模式，history模式
// 键，值如果一样可以省略不写值，加入上面的数组定义的是routes
// 那下面就是routes:routes，就可以直接写routes，这边为了区分还是取了不一样的名字
routes:routesArr//路由表
})JS中的三个文件导入，axios.min.js，vue-router.js，vue.js
views包代码
DepartView.js子组件
var departView = {
template:`
<div>这是部门管理界面</div>
`
}LoginView.js子组件
这提到了路由器的三种跳转方式
// 这定义了一个子组件
var loginView = {
template:`
<div>
登录界面
<input type="text">
<input type="password">
<input type="button" value="登录"
@click="doLogin">
<router-link to="/main"><input type="button" value="跳转"></router-link>
</div>
`,
methods:{
// 通过路由跳转到员工管理页面（为了实现路由的页面跳转）
doLogin(){
// 第一种跳转方式，get方式
// this.$router.push({
// path:"/staff",//通过path跳转是以get方式跳转，传递参数用query
// query:{
// age : 18
// }
// })//view内置的属性用$表示
// 第二种跳转方式，post方式
this.$router.push({
name:'main',//通过name跳转是以post方式跳转，传递参数用params
params:{
age:18
}
})
// 第三种方式，直接通过超链接跳转router-link to,第十行代码
}
}
}StaffView.js子组件
var staffView = {
template:`
<div>这是员工页面</div>
`,
created(){
// 这里接受一下上个页面传递过来的参数
console.log(this.$route.query.age)
}
}
MainView.js
var mainView = {
template:`
<div>
<div class="menu">
<router-link to="/staff"><input type="button" value="员工管理"></router-link>
<router-link to="/depart"><input type="button" value="科室管理"></router-link>
</div>
<router-view></router-view>
</div>
`
}六、重要知识点
（1）路由器两种模式
在路由器的index.js代码中我们提到 mode:"hash"，这里有两种模式，hash模式和history模式，那么这两种模式有什么区别呢
①URL展示与原理：
Hash模式：在URL中使用“#”符号来模拟一个完整的URL，当URL的hash部分发生变化时，不会重新加载页面，而会触发hashchange事件，通过监听这个事件来实现页面的定位和内容渲染。hash值只是客户端的一种状态，当向服务器发送请求时，hash部分不会被发送。这种模式的URL中会包含“#”符号。
History模式：利用HTML5 History API中的pushState和replaceState方法，可以在不刷新页面的情况下修改浏览器的历史记录和URL。这使得URL看起来更加美观和直观，没有“#”符号。但是，由于History模式使用的是正常的路径形式，因此需要服务器进行相应的配置，以确保在直接访问URL时返回正确的页面。
②兼容性和配置需求：
Hash模式：具有良好的兼容性，支持所有现代浏览器
History模式：需要服务器进行配置支持。如果后台没有正确的配置，用户直接访问可能会返回404错误。
（2）三个js的文件包的导入顺序问题
vue.js的导入一定要在vue-router.js前面，后者是基于前者实现的
（3）三种路由器跳转方式
①第一种跳转方式，get方式
this.$router.push({
path:"/staff",//通过path跳转是以get方式跳转，传递参数用query
query:{
age : 18
}
})//view内置的属性用$表示②第二种跳转方式，post方式
this.$router.push({
name:'main',//通过name跳转是以post方式跳转，传递参数用params
params:{
age:18
}
})③第三种方式，直接通过超链接跳转router-link to
<router-link to="/main"><input type="button" value="跳转"></router-link>（4）相关概念
route：当前路由信息
routes：路由表
router：路由器
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
