[JavaScript知识库]vue的路由系统（上）

路由简介 ：

什么是路由？

是设备和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>

1. router-link是什么?

   1. VueRouter在全局注册的组件, 本质就是a标签

2. router-link怎么用?

   1. 当标签使用, 必须传入to属性, 指定路由路径值

3. router-link好处?

   1. 自带激活时的类名, 可以做高亮

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

跳转传参?

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

• /path?参数名=值

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

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

• $route.query.参数名

• $route.params.参数名

1. 创建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 (以后上线需要服务器端支持, 否则找的是文件夹)

编程式导航

嵌套和首位