vue的路由系统（上）

2021-10-01 23:32:52 阅读：159 来源： 互联网

路由简介：

什么是路由？

是设备和ip的映射关系，路径和组件的映射关系，接口和服务的映射关系，所以路由就是一种映射关系。vue的路由指的路径和组件的映射关系（切换对应页面）

为什么要使用路由：

1.为了使用切换业务场景也是前端路由的作用，（就是切换页面），

2.单页面应用（SPA）：所有功能在一个HTML页面上实现

3.优点：

整体不刷新页面，

用户体验更好

4.缺点：

开发成本高（需要学习专门知识）

首次加载慢，不利于seo

在vue中用vue-router实现页面切换

vue-router本质上是一个第三方的包（官方推荐）

vue文件分两类,一个页面组件，一个复用组件

声明式导航

可用组件router-link来代替a标签，router-link实质上最终会渲染a连接。to属性等价于提供href属性（to无需#）

<router-link to="/my">我的</router-link>
      <a href="#/my">我的</a>

router-link是什么?
1. VueRouter在全局注册的组件, 本质就是a标签
router-link怎么用?
1. 当标签使用, 必须传入to属性, 指定路由路径值
router-link好处?
1. 自带激活时的类名, 可以做高亮

总结: 链接导航, 用router-link配合to, 实现点击切换路由

跳转传参

在router-link上的to属性传值, 语法格式如下

/path?参数名=值
/path/值 – 需要路由对象提前配置 path: “/path/参数名”

对应页面组件接收传递过来的值

$route.query.参数名
$route.params.参数名

创建components/Part.vue - 准备接收路由上传递的参数和值

<template>
  <div>
      <p>关注明星</p>
      <p>发现精彩</p>
      <p>寻找伙伴</p>
      <p>加入我们</p>
      <p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p>
            
                              // $route.query.参数名 //
                               //  $route.params.参数名 //
  </div>
</template>

路由定义

{
    path: "/part",
    component: Part
  },
  {
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },

导航跳转, 传值给MyGoods.vue组件

<router-link to="/part?name=小传">朋友-小传</router-link>
<router-link to="/part/小智">朋友-小智</router-link>


to="/path?参数名=值"   //
to=“/path/值” (需在路由规则里配置/path/:参数名)   //

总结

?key=value 用$route.query.key 取值

/值提前在路由规则/path/:key 用$route.params.key 取值

重定型和模式

重定型：

网页打开url默认hash值是/路径
redirect是设置要重定向到哪个路由路径

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

路由的模式和设置

hash路由例如: http://localhost:8080/#/home

history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)

编程式导航

嵌套和首位

标签：vue,route,系统,link,router,path,路由
来源： https://blog.csdn.net/m0_61749828/article/details/120579981

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue的路由系统（上）

声明式导航

重定型和模式

编程式导航

嵌套和首位