vue3重构个人网站1——路由与导航

1 框架配置

2 vue3路由

 2.1 路由的颠覆

 2.2 路由监听

3 导航制作

 3.1 下拉框

 3.2 搜索框

 3.1 侧边栏

1 框架配置

在vuecli4.5.0以上版本可以直接在创建项目时选择vue版本。

vue create projectname

与旧版基本类似没有太多变化，一路回车空格即可。这里选用了stylus预编译器方便书写css样式，好了开始吧！

2 vue3路由

2.1 路由的颠覆

  vue3中使用的是composition API，在vue2中js代码可以分为data,methods,computed……但是在vue3中所有数据及方法都集中在了setup函数中，同时取消了this指向，当然可以通过setup的第二个参数进行一些this操作，但是无法像以前一样使用this.$route操作路由。
  vue3中提供了useRoute和useRouter对路由进行操作。

import {useRoute,userRouter} from "vue-router" //引入路由模块
// 初始化路由
const route = useRoute()  //  用于获取路由信息，params/meta等
const router = useRouter() // 用于操作路由，例如路由跳转

  再来看看路由的配置，路由配置在初始时就选中router会自动生成route文件，结构上有变化，但使用上还是一样的。

import {
  createRouter,
  createWebHistory,
} from 'vue-router'

import Home from '../views/Home/Home.vue'

const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

2.2 路由的监听

  找了很久都没找到vue3如何监听路由，一开始想通过watch useRoute属性来监听，但是并没有效果，后面找到了个获取当前路由的方法。

import {getCurrentInstance} from "vue"
const { ctx } = getCurrentInstance()
watch(
	() => ctx.$router.currentRoute.value,
	(route) => {}
)

  搞定！可以获取到path,name……这些熟悉的属性，但总是觉得不如useRoute方便，如果有找到更好的方法麻烦在下面留言。

3 导航制作

导航栏一共包括3个宽度布局，>1000px,>750px,<750px.

屏幕宽度在1000px以下，750px以上时主要是通过跳转大小和间距，在750px以下均使用移动端的布局。布局上采用flex布局，拆分成3部分，左侧logo，搜索框，导航内容。

3.1 下拉框

  在导航中Articles下包含3个副导航，下拉框交互采用了点击与触碰相结合的形式，即点击时展开，鼠标移出，再次点击时关闭导航，这样的好处是不会在鼠标意外移入时触发。

3.2 搜索框

  搜索框根据标题和简介进行筛选，此处引入了lodash插件完成延迟筛选的功能，防止每次输入立即进行筛选占用内存。交互方面在输入框失去焦点时清空输入内容和搜索内容。

import debounce from "lodash/debounce"
// 筛选文章
const search = debounce((e) => {
	const val = e.target.value
	data.searchArticles = data.articles.filter((article) => {
		const regex = new RegExp(`^${val}`, "gi")
		return regex.test(article.title) || regex.test(article.content)
	})
	if (val === "") data.searchArticles = []
}, 500) //延迟500ms执行

3.3 侧边栏

  移动端采用侧边导航的方式，点击左上角的三横向展开导航，点击侧边栏外部或者切换路由时关闭导航。并且侧边导航将二级导航直接展开成一级导航，并加入标签筛选文章直接导航，极大的加快的搜索定位。
  交互方面：均增加hover动画，Technology,Life,Invest中采用宽度方法，标签中是整体方法，Picture和Storage中是背景颜色改变。
  侧边栏除了在移动端中使用外，还将在PC端的主页下方使用。