Vue-Router总结

路由三大组成部分

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

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上流星&洒下星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值