Vue学习笔记 —— vue-router

本文介绍了Vue路由的核心概念和使用方法,包括路由的概念、为什么使用Vue Router、安装步骤。接着详细讲解了重定向、别名、根路径、命名路由、命名视图和动态路由的配置与应用,强调了它们在实际项目中的作用和注意事项,帮助开发者更好地理解和掌握Vue的导航管理。
摘要由CSDN通过智能技术生成

路由的概念

路由的本质是一种个对应关系,比如说在URL中输入要访问的url地址之后,浏览器要去请求这个地址对应的资源。

为什么要使用路由?

vue单文件应用,所以一般a标签跳转不再使用。这个时候我们需要借助vue-router插件来实现Vue组件之间的跳转。

vue-router安装

cnpm install vue-router --save
npm install vue-router --save

1、重定向

重定向通过 routes 配置来完成,重定向的目标可以是路径,已命名的路由,或者是一个方法

const router = new Router({
   
  routes: [
    {
    path: '/a', redirect: '/b' }
  ]
}
const router = new Router({
   
  routes: [
    //一个命名的路由
    {
    path: '/a', redirect: {
    name: 'c' }}   
  ]
}
const router = new Router({
   
  routes: [
    //一个方法,动态返回
     {
    path: '/a', redirect: to => {
   
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
      return '/home'
    }}   
  ]
}

其中方法接收目标路由作为参数,return 重定向的 字符串路径/路径对象。

2、别名

什么是别名? /a 的别名是 /b,意味着当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

作用:别名可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

比如,处理首页访问时,常常将index设置为别名,比如将’/home’的别名设置为’/index’。

但是,要注意的是,的样式在URL为/index时并不会显示。因为,router-link只识别出了home,而无法识别index

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值