Vue Day 7

_Koreyoshi
289 阅读5分钟

路由模块封装

路由的封装抽离

好处：拆分模块，利于维护

核心思路：

  • 新建router下的index.js文件
  • 将与路由有关代码挪入index.js文件中
  • 在main.js中导入路由规则

image.png

找某个目录下的某文件：

  1. 从当前文件出发（简单）
  2. 使用绝对路径@/views，@指代src目录，可以用于快速引入组件

利用router-link替代a标签实现高亮

导航链接

vue-router 提供了一个全局组件 router-link (取代 a 标签)

  • 能跳转 配置 to 属性指定路径(必须) ，本质还是 a 标签 ，to 无需 #

  • 能高亮 默认就会提供 高亮类名，可以直接设置高亮样式

语法： <router-link to="path的值">发现音乐</router-link> to不可省略

  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>

示例：

App.vue
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
//模糊匹配
.footer_wrap a.router-link-active {
  background-color: paleturquoise;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>
Find.vue
<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>

</style>
My.vue
<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
  </div>
</template>

<script>
export default {
  name: 'MyMusic'
}
</script>

<style>

</style>
Friend.vue
<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

<script>
export default {
  name: 'MyFriend'
}
</script>

<style>

</style>
router下的index.js
import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false

// 封装全局指令 focus
Vue.directive('focus', {
  // 指令所在的dom元素，被插入到页面中时触发
  inserted (el) {
    el.focus()
  }
})


new Vue({
  render: h => h(App),
  router
}).$mount('#app')

两个类名

使用router-link跳转后，我们发现，当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能

1.router-link-active 模糊匹配（用的多）

to="/my" 可以匹配 /my /my/a /my/b ....

只要是以/my开头的路径 都可以和 to="/my"匹配到

2.router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

自定义匹配的类名

image.png

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    ...
  ], 
  linkActiveClass: 'active', // 配置模糊匹配的类名
  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

跳转传参

目标：在跳转路由时，进行传参

查询参数传参

（1）语法：

  • to="/path?参数名=值"

（2）对应页面组件中接受传递过来的值

  • $router.query.参数名

image.png

在created这样js代码中应为this.$router.query.参数名

动态路由传参

  1. 配置动态路由

动态路由后面的参数可以随便起名，但要有语义

const router = new VueRouter({
  routes: [
    ...,
    { 
      path: '/search/:words', 
      component: Search 
    }
  ]
})
  1. 配置导航链接
  • to="/path/参数值"
  1. 对应页面组件接受参数
  • $route.params.参数名

params后面的参数名要和动态路由配置的参数保持一致

image.png

两种传参区别

  1. 查询参数传参 (比较适合传 多个参数)

（1） 跳转：to="/path?参数名=值&参数名2=值"

（2）接收：$route.query.参数名

  1. 动态路由传参 ( 优雅简洁，传单个参数比较方便)

    （1） 配置动态路由：path: "/path/:参数名"

    （2） 跳转：to="/path/参数值" （3） 接收：$route.params.参数名

    注意：动态路由也可以传多个参数，但一般只传一个

动态路由参数可选符

问题：配了路由 path:"/search/:words" 为什么按下面步骤操作，会未匹配到组件，显示空白？

原因：/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

1682497238305.png

const router = new VueRouter({
  routes: [
 	...
    { path: '/search/:words?', component: Search }
  ]
})

路由重定向

Vue路由-重定向

1.问题

网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白

2.解决方案

重定向→ 匹配path后, 强制跳转path路径

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

1682497872821.png

Vue路由-404

作用：当路径找不到匹配时，给个提示页面

位置：配置在其他路由规则的最后面

语法：path: "*" (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

Vue路由-模式设置

问题 ：路由的路径看起来不自然, 有#，能否切成真正路径形式?

语法

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

编程式导航-两种路由跳转方式

基本跳转

编程式导航：利用js带，进行传参

两种语法：

  • path 路径跳转 （简易方便）
//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

  • name 命名路由跳转 (适合 path 路径长的场景)

    this.$router.push({
  name: '路由名'
})

    { name: '路由名', path: '/path/xxx', component: XXX },

路由传参

两种传参方式：查询参数+动态路由传参

两种跳转方式，对于两种传参方式都支持：

① path 路径跳转传参

  • query传参
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法（对象写法） 更适合传参
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

接受参数的方式依然是：$route.query.参数名

  • 动态路由传参（需要配动态路由）
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

接受参数的方式依然是：$route.params.参数值

注意：path不能配合params使用

② name 命名路由跳转传参

  • query传参
this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})
  • 动态路由传参
this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

基于VueCli自定义创建项目

流程如下：

image.png

1.安装脚手架

npm i @vue/cli -g

2.创建项目

vue create hm-exp-mobile

3.选择自定义

  • Babel/Router/CSS/Linter

1682941856172.png

  • 选择vue的版本
//选择Vue2
 3.x
 2.x

  • 是否选择历史模式

    no

1682941888453.png

  • 选择CSS预处理器

1682941900018.png

  • 选择无分号规范（标准化）

1682941918562.png

  • 选择配置文件的生成方式 （直接回车）

1682941935794.png

  • 将配置文件放单独文件中（以后好管理）

1682941947985.png

  • 是否保存预设，下次直接使用？ => 不保存，输入 N

  • 等待安装，项目初始化完成

  • 启动项目

1682941974763.png

ESlint手动修正代码规范错误

代码规范：一套写代码的约定规则 例如：赋值符号的左右是否需要空格 一句结束是否是要加;？...

JavaScript Standard Style 规范说明 ：standardjs.com/rules-zhcn.…

下面是这份规则中的一小部分：

  • 字符串使用单引号 'abc'(需要转义的地方除外)
  • 无分号 connnst name='zs'
  • 关键字后加空格 if (condition) { ... }
  • 函数名后加空格 function name (arg) { ... }
  • 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null

如果代码不符合标准，ESlint会跳出来提示

image.png

两种解决方案：

  1. 手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码去 [ESLint 规则列表]中查找其具体含义。

在[ESLint 规则列表]使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。

1682942554314.png

ESlint自动修正代码规范错误

通过eslint插件来实现自动修正

  1. 基于vscode插件 eslint会自动高亮错误显示
  2. 通过配置，eslint会自动帮助我们修复错误
avatar
文章
阅读
粉丝