路由器是什么意思？路由原则
在传统的开发模式中，url改变后，它会立即发起请求，响应整个页面，并呈现整个页面
spa锚值更改后，不会启动任何请求，会启动ajax请求在本地更改页面数据
如果页面不跳转，用户体验会更好
矿泉
单页应用(单页应用)
前端路由
锚值监控
使用ajax获取动态数据
核心点是锚值
前端框架vue/angular/react都适合开发单页应用
基本用途
vue路由器
它是vue的核心插件
1:下载npm i vue-router -s
1.5(重要):安装插件vue . use(vuerouter)；
2:“导入vue-router表单”。/x.js "转换成main.js
3:创建路由对象var router=new vuerouter()；
4:配置路由规则路由器。添加路由([路由对象])；
路由对象{路径： "锚点值"，要显示的组件：组件(坑填充)}
5:将配置的路由对象提供给vue
在选项中传递的-key称为路由器
6: pit预留(使用组件)路由器-视图/路由器-视图
路由器链接
要将路由器链接到="/xxx/x "，请单击我/路由器链接
帮助我们生成a标签的href
锚值代码维护不方便。如果需要更改锚数值名称，
需要更改[使用次数1(配置规则)]位置的代码
命名路线
1:为路由对象命名{name:" home "，path:"/home "，component: home}
2:在路由器链接的to属性中描述了此规则
router-link : to=" { name : " home " }/router-link "
通过名称查找路由对象，获取其路径，并生成自己的href
大大降低了维护成本，只需在main.js中改变路径属性就可以改变锚值
参数路由器-链路，
vue.prototype.xxx={add:fn}
在所有组件中，这个对象可以通过使用this.xxx获得
查询字符串
1:将：配置为="{name :" detail "，查询： {id :hero。id}} "
2:规则{名称： "详细信息"，路径： "/详细信息"，组件：详细信息}
3:拿着这个。$route.query.id
生成a href="/detail？id=1
路径模式
4:生成
1:将：配置为="{name:" detail "，params: { id3360hero。id}} "
2:规则{名称： "详细信息"，路径： "/详细信息/: id"}
3:拿着这个。$route.params.id
查询字符串配置参数
路由器链接一次
一旦你得到它
路径模式配置参数
路由器链接一次
配置规则时声明位置
一旦你得到它
总结编写代码的注意事项
路径模式需要在路由规则中声明位置
另一个名字
/a的别名是/b，这意味着当用户访问/b时，url将保持为/b，但路由匹配是/a，就像用户访问/a一样。
{ path: "/a "，component: a，alias: "/b" }
再直接的
//模式1:字符串路径路径
{ path: "/a "，redirect: "/b" }
//方法2:名称
{ path: "/a "，redirect: {name: "b"} }
//方法3:动态返回重定向目标
{ path: "/a "，重定向：到={
//方法接收目标路由作为参数；返回重定向的字符串路径/路径对象
}}
阶段总结
vue-router使用step : 1:引入2:安装插件：创建路由实例4:配置路由规则53360将路由对象与vue 6:关联留坑。
路由器-链接到="/xxx "命名路由
将名称属性添加到路由规则对象中
在路由器-链接：到="{name :" xxx"} "
$route路由信息对象，只读对象
$router路由操作对象，只写入对象
下图来自vue-router源代码
vue.use(插件对象)；//一些全局组件将在进程中注册，虚拟机或组件对象将挂在属性中
装载虚拟机和组件对象的方法是：对象。定义属性(vue。原型，" $ router "，{
get: function(){返回自己的路由器对象；
}
})
嵌套路由
根据锚点值的变化，只需将上图中的profile改为posts组件，即可使用嵌套布线
代码思想
路由器视图的第一层包含路由器视图
1:路由器视图的细分
2:每个坑都挖好了，应该对应一个单独的构件
使用说明： 1:路由器视图包含路由器视图2:路由子路由
路由守卫
它实际上是一个用于路由更改的事件回调函数
全局路由保护
路由器。beforeeach ((to，from，next)={})
路线。在每个((to，from)={})之后
传送专用防护装置
const router=new vuerouter({
routes: [
{
path: "/foo "，
component: foo，
beforeenter: (to，from，next)={
//…
}
}
]
})
大会内部的警卫
1:路由配置
{path:"/xxx/:id"}
2:路由器链接
router-link to="/xxx/1 "
router-link to="/xxx/2 "
const foo={
template: `…`，
beforerouteenter (to，from，next) {
//在渲染之前调用，确认该组件对应的路由
//没有！可以！"获取此组件实例"
//因为在守护执行之前还没有创建组件实例。
//不过，可以这样用
下一步(vm={
//通过“虚拟机”访问组件实例-未来组件
vm.msg="数据在此"；
})
},
before route date(to，from，next) {
//触发条件见下文
//可以访问组件实例this "
},
beforerouteleave前进(到，从，下一步){
//在导航离开组件的相应路线时调用
//可以访问组件实例this "
}
}
beforerouteupdate的触发条件(当动态路由参数改变时)
然后
下一个(“/xxx”)
//或者
下一步({name: "路由对象" } "的name属性)；
release next()；
取消此导航(url恢复为单击前的url)下一步(false)
再直接的
到| |从
那个。这个对象中的fullpath属性是常用的，它是当前的url
守护元属性的应用
路由元元数据-元是路由规则是否需要验证权限的配置。
与路由对象{ meta: { ischecked: true } }中的名称属性级别相同
路由钩子-权限控制的函数执行时间
每次路由匹配后，在路由器视图之前渲染组件
router.beforeeach(函数(to，from，next) {
//判断到或来自的完整路径
} )
编程导航
1:跳转到指定的锚点并显示页面。$ router.push ({name:" xxx "，query: {id33601}，params 3360 { name 3360 " abc " })；
2:配置规则{名称：" xxx "，路径："/xxx/:名称" }
3:据史书记载。向前还是向后
这个。$ router . go(-1 | 1)；
1代表进一步，1代表后退
过渡效果和缓存
我们需要在路线改变时改变页面，好吗！同时，我们希望添加一些淡入淡出效果，这样就可以使用过渡的内置组件
此外，考虑到缓存问题，结合使用保活组件
你看到的是这个
过渡
点火电极
路由器视图/路由器视图
/保持活力
/过渡
过渡和保持活动状态请参考文档中的第《内置组件》节了解详细信息
最后附上实施原则
