零基础Vue入门6——Vue router

本节重点：

路由定义

路由跳转
前面几节学习的都是单页面的功能，涉及到项目研发都是有很多页面的，这里就需要用到路由（vue router）。学习本节之后就可以写一个小型的项目了。

跟着练习一定带你可以上手开发vue项目。

我在gitcode上也建了了对应的vue学习项目，会跟随我的专栏进行定期代码更新，有需要可以克隆下载GitCode - 全球开发者的开源社区,开源代码托管平台

Vue Router

Vue Router 是 Vue.js 的官方路由。功能包括：

路由跳转、传参、查询、通配符
嵌套路由
动态路由
路由切换过滤效果
HTML5 history 模式或 hash 模式
.......

入门项目开发，可以先从掌握基础的路由跳转开始。

浏览器url上 **/ **之后的就是页面路由，？后面的就是页面传递的参数，多层的/ 就是嵌套路由的概念。例如：

编辑

所谓客户端路由，就是把你应用中的页面和浏览器的URL绑定起来，实现：

用户浏览不同页面------URL更新------组件更新。

通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

例如下面的例子，有3个页面通过一个导航来切换不同的页面。

编辑

路由定义

想要实现上述效果，第一步创建一个路由实例，在你项目的src目录下面新建router文件夹，之后新建一个index.ts文件。

php 复制代码

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/home/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      redirect: '/home',
    },{
      path: "/home",
      name: "home",
      component: Home,
      children: [
        {
          path: 'homeLayout',
          name: '首页',
          component: () => import('@/views/home/HomeView.vue')
        },
        {
          path: 'vue01',
          name: '第一节',
          component: () => import('@/views/vue01/index.vue')
        },
        {
          path: 'vue02',
          name: '第二节',
          component: () => import('@/views/vue02/index.vue')
        }
      ]
    }
  ],
})

export default router

上面就定义了一个嵌套路由，/home就是项目的入口文件，/home/homeLayout就是首页，以此类推。其中：

routes 选项定义了一组路由，把 URL 路径映射到组件
component 参数指定要渲染的组件
在main.ts中注册路由编辑
在 App.vue 中添加路由渲染容器组件 <RouterView> 渲染编辑

这些路由组件通常被称为视图，本质上它们只是普通的 Vue 组件。

路由的不同历史模式

Hash模式：用 createWebHashHistory() 创建， URL 之前使用了一个井号（#）
HTML5模式：用 createWebHistory() 创建，URL 会看起来很 "正常"，官网也比较推荐这种模式。

路由访问

在首页定义了一个导航

导航跳转（也就是声明式路由）可以使用routerLink组件的to属性定义
通过方法跳转（也就是编程式路由）的话可以使用router.push('对应的路由url')方法实现

xml 复制代码

<template>
  <div class="ln_container">
    <nav>
      <RouterLink v-for="item in menu" :to="item.path">{{ item.name }}</RouterLink>
    </nav>
    <div class="ln_main">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterLink, RouterView,useRouter } from 'vue-router';
import { ref,watch } from 'vue';

const menu = ref([
  {
    name: '首页',
    path: '/',
  },
  {
    name: 'vue01',
    path: '/home/vue01',
  }, {
    name: 'vue02',
    path: '/home/vue02',
  },
]);

const router = useRouter();
// 监听路由变化，如果跳转到/home,则跳转到/home/homeLayout
watch(() => router.currentRoute.value.path, (to) => {
  if (to === '/home') {
    router.push('/home/homeLayout');
  }
}, { immediate: true });

</script>

<style scoped lang="scss">
.ln_container {
  width: 100%;
  height: 100%;
  nav {
    display: flex;
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
    a {
      display: inline-block;
      padding: 10px;
      line-height: 20px;
      text-decoration: none;
      color: #333333;
      &:hover{
        background-color: #f0f0f0;
      }
    }
  }
}

nav a:first-of-type {
  border: 0;
}

.ln_main {
  padding: 10px;
}
</style>

通过 useRouter() 和 useRoute() 来访问路由器实例和当前路由。

常用api

重定向 redirect

ini 复制代码

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

路由传参params

javascript 复制代码

// 定义
const routes = [
  { path: '/users/:id', component: User },
];



// 使用

<template>
  <div>
    User {{ router.params.id }}
  </div>
</template>

导航守卫

简单项目基本这些就够用了，项目要求比较高的话，例如需要检查用户是否已经登录，没有登录的需要先跳转到登录页等等权限方面的需求的，就需要用到导航守卫了。

csharp 复制代码

 router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !isAuthenticated &&
     // ❗️ 避免无限重定向
     to.name !== 'Login'
   ) {
     // 将用户重定向到登录页面
     return { name: 'Login' }
   }
 })

更多路由导航学习：导航守卫 | Vue Router

路由切换过渡效果：过渡动效 | Vue Router

404页面

如果客户在浏览器上写了一个没有对应路由的url，怎么显示呢？可以提供一个默认的没找到的页面，匹配所有未找到路径的页面。

php 复制代码

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {...},// 正常的路由页面
    { 
      path: '/:pathMatch(.*)',  // 未匹配的页面
      component: NotFoundComponent 
    }
],
})

以上就是全部内容了。

若碰到其他的问题可以私信我 一起探讨学习
如果对你有所帮助还请 点赞 收藏 谢谢~！
关注收藏博客持续更新中。