vue-router之声明式导航与编程式导航

阿洋的小窝
1,691 阅读5分钟

1.0.路由基本简介和使用

路由：就是一一对应关系的集合

工作原理 : 前端路由的本质, 对url的hash值进行改变和监听，切换对应页面组件的dom结构

1.1 vue-router介绍

官网: router.vuejs.org/zh/

vue-router模块包

它和 Vue.js 深度集成

可以定义 - 视图表(映射规则)

模块化的

提供2个内置全局组件

<router-view></router-view>
<router-link to="/hash">xxx</router-link>

声明式导航自动激活的 CSS class 的链接

router-link-exact-active  与  router-link-active

1.2 路由 - 组件分类

一般的: .vue文件分2类, 一个是页面组件, 一个是复用组件

.vue文件本质无区别, 为方便程序员好管理与理解,做的区分

src/views(或pages) 文件夹 和 src/components文件夹

  • 页面组件 - 页面展示 - 配合路由用
  • 复用组件 - 展示数据/常用于复用

总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据

1.3安装并配置路由

vue-router文档

  • 安装
yarn add vue-router@3.5.3 
#OR
npm i vue-router@3.5.3

注意: 路由已更新到最新的4.0.0版本以上,需搭配vue3使用,如果是vue2的项目,需安装4版本以下的

  • 导入路由
import VueRouter from 'vue-router'
  • 使用路由插件
// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)
  • 引入跳转的组件
import Find from './Find.vue'
import My from './My.vue'
import Part from './Part.vue'
  • 创建路由规则数组
const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]
  • 创建路由对象 - 传入规则
const router = new VueRouter({
  routes
})
  • 关联到vue实例
new Vue({
  router
})
  • 用router-view占位展示的组件
<router-view></router-view>

总结1: 下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

总结2: 一切都围绕着hash值变化为准

补充: 以上配置,可通过脚手架手动配置的选项,自己添加,会自动生成

2.0 声明式导航 - 基础使用

可用全局组件router-link来替代a标签

  1. vue-router提供了一个全局组件 router-link
  2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
  3. router-link提供了声明式导航高亮的功能(自带类名)

示例:

<template>
  <div>
    <h1>App组件</h1>
    <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/movie">电影</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

当点击对应链接时,hash值发生变化,定义好的路由规则会监听变化,当发现到与path中定义的规则一致时,会对应切换到 component中定义好的组件

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

2.1声明式导航 - 跳转传参

在跳转路由时, 可以给路由对应的组件内传值

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

1.query传参。 适用场景：页面搜索

方式: /path?参数名=值 --- 不需要在路由对象中提前配置

2.params传参。 适用场景：详情页

方式: /path/值 --- 需要路由对象提前配置 path: “/path/:参数名”

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

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

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

3.0路由 - 重定向

匹配path后, 强制切换到目标path上

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

例如: 网页默认打开, 匹配路由"/", 强制切换到"/home"上

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

总结: 强制重定向后, 还会重新来数组里匹配一次规则

3.1路由404

统一处理异常地址：那些个正常配置的地址之外的地址。

示例: 通过通配符*，设置404页面

import NotFound from "@/components/NotFound";

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  },
  
  // ...正常路由
  
  { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
  }
]

总结: 如果路由未命中任何规则, 给出一个兜底的404页面

4.0编程式导航

用JS代码跳转, 声明式导航用a标签

4.1编程式导航 - 基础使用

语法:

this.$router.push({
    path: "路由路径",
    或
    name: "路由名"
})

4.2 编程式导航 - 跳转传参

目标: JS跳转路由, 传参

语法 query / params 任选 一个

this.$router.push({
    path: "路由路径"
    name: "路由名",
    query: {
        "参数名": 值
    }
    params: {
        "参数名": 值
    }
})
​
// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

注意:

1.用query方法传参,path与name都可以使用,虽然用name跳转, 但是url的hash值还是切换path路径值

2.使用path会自动忽略params,若要用params传参,必须在路由对象中添加name属性,以供使用

3.如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由,会报错

image.png

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
    path: "路由路径",
    query: {
        "参数1":值1,
        "参数2":值2
    }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "路由名称",
    params: {
        "参数1":值1,
        "参数2":值2
    }
})


// 后退
$router.back()

5.0路由嵌套

原理：router-view中再次包含router-view。

背景：一个组件内部包含的业务还是很复杂，需要再次进行拆分。

示例:

routes:[
  {
    path: '/page1', 
    component: Page1, // 这个组件内部还有router-view
    children: [
      {
        path:'',  // path为空，表示当 #/page1时，显示 Page1组件+组件1
        component: 组件1  // 
      },
      {
        path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2
        component: 组件2
      },
      {
        path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3
        component: 组件3
      }
    ]
  }
]

总结：

  1. 在已有的路由容器中，再实现一套路由，再套一个路由容器，叫：嵌套路由。
  2. 嵌套路由除了 router-view 之间需要嵌套，路由规则也需要通过children来实现嵌套

未完待续......

avatar
文章
阅读
粉丝