Vue3笔记——路由-MLHITRE

文章目录

一，安装
二，目录结构
三，基本使用
四，路由传参
五，路由元信息
六，一些小的处理点
七，路由重定向
参考资料：

一，安装

npm install vue-router@4

二，目录结构

路由习惯都是配置在router目录下的，在src/router目录下。

我习惯新建两个文件，一个index.ts放主体代码（导入routes的路由树并且激活路由），一个routes.ts文件，放具体的路由树的结构。

三，基本使用

//index.ts
import {createRouter,createWebHashHistory} from 'vue-router'
import {routes} from './routes.ts'

const router = createRouter({
  history:createWebHashHistory(import.meta.env.BASE_URL),//history模式是createWebHistory()
  //这里的import.meta.env.BASE_URL指的是vite下的项目基地址，它其实是Vue2的router的base选项，现在作为参数传入createWebHashHistory函数中
  route:routes,
  scrollBehavior: () => ({ left: 0, top: 0 }),
})

export default router

//routes.ts
import type { RouteRecordRaw } from 'vue-router' 
export const routes:Array<RouteRecordRaw> = [
  {
    path:'/',
    name:'Layout',
    component:()=>import("@/views/layout.vue"), //异步组件，访问对应路由的时候按需引入，减少卡顿
    children:[
        {
                path:'/home',
             name:"Home",
             component:()=>import("@/views/home.vue"),
      }
    ]
  }
]

<!-- App.vue-->
<template>
  <!-- 全局页头 -->
  <Header />
  <!-- 路由 -->
  <router-view />
  <!-- 全局页脚 -->
  <Footer />
</template>
<script lang=”ts“ setup>
  import {useRoute,useRouter} from 'vue-router'
  //这个route里包含着当前route的信息，例如name、params、query
  const route = useRoute()
  //router包含当前router的方法，例如push、back
  const router = useRouter()
</script>

路由跳转：路由跳转时不需要刷新页面的。

<!--使用router-link标签跳转-->
<template>
<router-link to="/home"></router-link>
</template>

等同于：

router.push({
  name:"home",
})

四，路由传参

name和params同时出现，path和query同时出现。传递像下面这样传，收的话就用route.xxx获取就行。

query相当于get请求，会将参数带在路径里；params相当于post请求，路径里不能带。

router.push({
  name:'talk',
  params:{
    id:123
  },
})

五，路由元信息

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@views/login.vue'),
    meta: {
      //这些东西都是自定义的，相当于该路由自带的参数或者标签
      title: '登录', //浏览器标题栏标题
      isDisableBreadcrumbLink: true,//是否禁用面包屑链接
      isShowBreadcrumb: false,//是否显示面包屑
      addToSidebar: false,
      sidebarIcon: '',
      sidebarIconAlt: '',
      isNoLogin: true,
    },
  },
]

六，一些小的处理点

路由别名：就是在url显示的时候美观一点。

 {
    path: '/home',
    alias: '/index',
    name: 'home',
    component: () => import('@/views/home.vue'),
  },

当我们前端路由切换的时候想要页面滚动到顶部或者保持原来的滚动位置

const router = createRouter({
  route:[...],
  // 滚动到指定位置
  scrollBehavior(to,from,savedPosition){
    if(savedPosition){
    return savedPosition
  }else {
    return {x:0,y:0}
  }
  },
  // 滚动到锚点
  scrollBehavior(to,from,savedPosition){
    if(to.hash){
      return {
        selector:to.hash
      }
    }
  },
  
})

七，路由重定向

背景:例如为了防止用户随便更改路由参数导致页面崩溃，需要进行路由重定向将不符合要求的参数进行重定向到一个规范页面

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }//从a重定向到b
    { path: '/a', redirect: { name: 'foo' }} //也可以是命名路由
    { path: '/a', redirect: to => {
      // 目标路由作为传入参数
      const { hash, params, query } = to
      let type = Number(to.params.type)
      if(type < 0 || type > 3 || !type){
        to.params.type = '0'
      }
      return '/list/:type'
      //返回重定向后的字符串路径/路径对象，这个返回值必须已存在
      // 而且不能是自身
    }}
  ]
})

//最常用的就是首页跳转
//比如我们想输入mlhiter.top,但是跳转到首页/home
//缺点是不能跳转到带参数的路由，当然也用不到
{
  path:'/',
  redirect:'/home',
}

当然redirect也可以带参数

{
    path: '/',
    redirect: {
      name: 'home',
      query: {
        from: 'redirect',
      },
    },
  },

参考资料：

Vue3入门指南和实战案例

李致知

Vue3笔记——路由