Vue-Router总结

Posted 2021-07-18 老张在线敲代码

路由三大组成部分

router-link:导航—link 标签
router-view:路由视图–路由页面呈现的地方 new
VueRouter():路由配置—routes

路由配置 VueRouter它是什么？

vue-router 是 vue 官方出的一个专门用于 vue 的路由。
使用插件安装
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