vue3路由

vue3路由

Vue3 路由是 Vue.js 3.x 版本中用于管理页面跳转和导航的模块。它基于 Vue Router 4.x，相较于 Vue2 的路由机制，Vue3 路由在功能和用法上都有一些改进和变化。

安装和引入：

在 Vue3 中，可以通过 npm 进行安装

npm install vue-router@next
1

路由配置、创建 Router 实例：

在 Vue3 中，路由配置通常在一个单独的 router.js 或 router/index.js 文件中进行。配置对象包含了所有路由的信息，例如路径、组件等。

动态导入可以在运行时加载模块，而不是在程序启动时加载所有模块。这在处理大型应用程序或仅在需要时加载特定模块时非常有用。示例：

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


const Home=()=>import(/* webpackChunkName: "about" */ '../views/home/index.vue')
const Category=()=>import(/* webpackChunkName: "about" */ '../views/category/CategoryComponent.vue')
const Detail=()=>import(/* webpackChunkName: "about" */ '../views/detail/DetailComponent.vue')
const Profile=()=>import(/* webpackChunkName: "about" */ '../views/profile/ProfileComponent.vue')
const ShopCart=()=>import(/* webpackChunkName: "about" */ '../views/shopcart/ShopCart.vue')



const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta:{
      title:'图书兄弟'
    }

  },
  {
    path: '/category',
    name: 'Category',
    component: Category,
    meta:{
      title:'图书兄弟-分类'
    }

  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    meta:{
      title:'图书兄弟-商品详情'
    }

  },
  {
    path: '/shopcart',
    name: 'ShopCart',
    component: ShopCart,
    meta:{
      title:'图书兄弟-购物车'
    }
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta:{
      title:'图书兄弟-个人中心'
    }
  },


]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
//导航守卫
router.beforeEach((to,from,next)=>{
  //如果没有登录，这里跳转login
  //跳转逻辑
  next();
  document.title=to.meta.title
})
export default router



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

参数解释：
{
path: ‘/’,
name: ‘home’,
component: Home,
meta:{
title:‘图书兄弟’
}

path: 这个属性定义了路由的路径。当用户访问这个路径时，对应的组件（在component属性中定义）将被渲染。在这个例子中，路径是’/'，意味着当用户访问应用的根路径时，Home组件将被渲染。

name: 这个属性给路由起了一个名字，通常用于在嵌套路由或编程式导航中引用该路由。在这个例子中，路由的名字是’home’。

component: 这个属性定义了当访问该路由时需要渲染的组件。在这个例子中，Home组件将被渲染。

meta: 这个属性是一个包含各种元数据的对象，这些数据可以在路由守卫、路由组件等地方被访问和使用。在这个例子中，meta对象包含一个title字段，它的值是’图书兄弟’。这个值可能被用于页面的标题或其他需要显示的地方。

导航守卫

这个函数可以用于在每次路由改变之前执行一些操作，例如检查用户是否已经登录。

router.beforeEach((to, from, next) => {  
  // 检查 to.meta.title 是否存在  
  if (to.meta && to.meta.title) {  
    document.title = to.meta.title;  
  } else {  
    // 如果没有 title，你可以设置一个默认的标题，或者直接跳过这个操作  
    document.title = 'Default Title';  
  }  
  
  // 如果没有登录，这里跳转 login  
  if (!userIsLoggedIn()) {  
    next('/login');  
  } else {  
    next();  
  }  
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用路由

使用 和 进行页面导航和渲染： 在 Vue3 中，可以通过 组件生成一个可点击的链接，实现页面的导航。
例如：

<template>
<RouterView></RouterView>
  <nav id="nav">
    <router-link class="tab-bar-item" to="/">
      <div class="icon"><i class="iconfont icon-shouye"></i></div>
      <div>首页</div>
    </router-link>

    <router-link class="tab-bar-item" to="/category">
      <div class="icon"><i class="iconfont icon-fenlei"></i></div>
      <div>分类</div>
    </router-link>

    <router-link class="tab-bar-item" to="/shopcart">
      <div class="icon"><i class="iconfont icon-gouwugouwuchedinggou"></i></div>
      <div>购物车</div>
    </router-link>

    <router-link class="tab-bar-item" to="/profile">
      <div class="icon"><i class="iconfont icon-yonghu"></i></div>
      <div>我的</div>
    </router-link>
  </nav>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

返回上一个页面没有跳转指定页

这个函数的作用是当用户点击"返回"按钮时，他们将被导航到前一个路由，如果历史记录中没有前一个路由，那么他们将被导航到首页（'/'）。

const goback = () => {
  window.history.length > 1 ? router.go(-1) : router.push('/');
}
1
2
3