vue的路由系统(上)

2021/10/1 23:41:14

本文主要是介绍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 (以后上线需要服务器端支持, 否则找的是文件夹)

编程式导航

嵌套和首位



这篇关于vue的路由系统(上)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程