路由三大组成部分
router-link:导航—link 标签
router-view:路由视图–路由页面呈现的地方 new
VueRouter():路由配置—routes
router-link属性
1.to进行页面跳转，更改路径
2.tag : 指定之后渲染成什么组件，比如将其渲染成<li
3.replace : replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面
4.active-class : 对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称
路由配置 VueRouter它是什么？
vue-router 是 vue 官方出的一个专门用于 vue 的路由。
使用指令安装 npm install vue-router
Vue.use(VueRouter)
组成部分
mode:让路由以某种形式呈现，hash 和 history 模式
base:设置一个根路径，用于发布的时候绑定服务端子目录的
routes:设置路由匹配项目的，是核心的控制器。
数据类型：数组–>匹配对象
path:匹配的 url 地址【必须有的】
component：加载的页面–组件【必须有的】
children：子路由
name：路由的名称–名字
alias：别名
redirect：重定向
meta：路由的元信息
动态路由
定义 一个匹配规则，可以匹配 n 个导航地址，显示同一个页面 使用场景 比如从产品列表跳转到详情页，那么详情页就是一个动态路由匹配。
重定向和别名
重定向：redirect 语法：{path:“/dir”,redirect:“/otherDir”}
场景：当访问一个路径的时候，自动跳到指定的地址里。
举例：当访问/跳到/home,用*做 404 页面容错处理 别名 alias
给一个路由定义一个或多个地址，当访问其中某一个地址的时候，url 地址栏不会变，但是显示的都是同一个页面。
与重定向的区别： 和重定向不一样的是重定向地址栏会跳转到新的路由里，别名不会跳转，匹配的是同一个路由
语法：
//取一个别名
{
path:"/home",
alias:"/",
component:Home
}
//取多个别名
{
path:"/home",
alias:["/","/me"],
component:Home
}
嵌套路由
一级路由里包含着二级路由，依次递归嵌套。 注意事项：
根组件里的 router-view 显示的是一级路由 嵌套的路由必须要在一级的路由组件中，写 router-view 嵌套路由的匹配
path 不要加/，因为/表示一级路由
语法：
{
path:"/list",
component:List,
children:[
{
path:"hot",component:Hot
}
]
}
命名路由
语法：
router.js
{
path:"/home",
name:"routeName",//路由的名称
component:Home,
}
html
<router-link :to="{ name: 'routeName' }"></router-link>
js
this.$router.push({ name: "routeName" });
优点：
避免了路径过长，书写繁琐，后期迭代维护成本高的问题。
缺点：
命名路由不能和路径跳转混合使用，容易产生 bug，因为路径跳转的匹配权重大于命令路由的匹配。
路由拦截器
定义：控制路由是否可访问，用于做权限控制，比如未登录状态不可进入付费页面。
路由的生命周期，路由的钩子函数，路由的拦截器，路由的守卫 全局路由守卫【常用的】 前置路由守卫 beforeEach
触发时机：当进入一个路由前触发
语法：
router.beforeEach((to, from, next) => {
// from 表示该路由从哪儿来，可以理解为当前的路由
// to 表示要进入的下一个路由
// next方法，该方法必须要调用，接收三种值：字符串的路径，布尔值，函数【特殊情况下可用】
// 如果要禁止路由跳转，next(false)
next();
});
组件的路由守卫【一般】
beforeRouteLeave：当前路由离开的时候触发，多用于表单填写页面
beforeRouteUpdate：模板页面不销毁，路由一直在更新，要实时获取路由信息，就需要使用该函数了。导航列表和子路由页面同时存在的时候。
路由独有的守卫【最不常用的】 beforeEnter【当前路由被激活了】
语法：
routes:[{
path:"*",component:Dom,beforeEnter(){}
}]
导航配置
router-link vue-router 内置的一个导航组件
属性：
to:跳转的地址 tag:指定导航的渲染 dom 类型，默认是 a 标签 active-class:指定当前导航的激活样式类名
replace:让当前的路由地址替换历史记录中的最后一个 登陆之后，为了防止用户点击后退重新进入登录，开启 replace
append:向历史记录插入一条【默认的方式】
跳转方式
编程式导航 用 js 跳转就叫编程式导航
$router：是路由的实例对象，拥有路由的所有功能 push：跳转地址(向历史记录添加一条)
replace：跳转地址(替换掉历史记录中最后一条) back：后退 go：用数字跳转历史记录 $route：当前路由的数据信息 声明式导航
用跳转叫声明式导航
原文链接：https://blog.csdn.net/weixin_54522911/article/details/117444516
