第一步：创建路由需要映射的组件（打算显示的页面）
第二步：通过createRouter创建路由对象，并且传入routes和history模式
- 配置路由映射: 组件和路径映射关系的routes数组
- 创建基于hash或者history的模式
第三步：使用app注册路由对象（use方法）
第四步：路由使用: 通过<router-link>和<router-view>

01 - 创建映射组件

Vue3 之 Vue - Router

02 - 创建路由对象

在根目录下创建router文件夹，并在其中创建index.js

// 1. 导入创建路由对象 和 创建hash对象
import { createRouter, createWebHashHistory } from 'vue-router';

// 2. 导入组件
import Home from '../views/Home.vue';
import About from '../views/About.vue';

// 3. 配置路由映射关系表
const routes = [
  // 路径和组件映射起来
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

// 4. 创建路由对象
const router = new createRouter({
  // 5. 配置路由跳转模式，这里使用 hash 模式
  history: createWebHashHistory(),
  // 把映射表放入
  routes
});

// 5. 导出
export default router;

03 - 在 main.js 中导入

import { createApp } from 'vue';
import App from './App.vue';

// 1. 导入路由对象
import router from './router';

// 2. 使用use调用一下
createApp(App).use(router).mount('#app');

04 - 在App.vue文件中设置

router-link => 跳转链接

router-view => 组件显示的位置

<template>
  <div class="app">
    App 页面
    <br />
    <br />

    <!-- 1. 设置跳转链接 -->
    <router-link to="/home">Home</router-link>

    <br />
    <router-link to="/about">About</router-link>
    <br />
    <br />

    <!-- 2. 配置显示组件的地方 -->
    <router-view></router-view>
  </div>
</template>

05 - 效果

Vue3 之 Vue - Router

4. 路由的默认路径

以让路径默认跳到到首页

path配置的是根路径: / => redirect是重定向

const routes = [
  // 默认显示的页面  =>  home
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

5. 使用history模式

// 1. 导入创建路由对象
/**
 * createWebHashHistory : hash模式
 * createWebHistory : history模式
 */
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

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

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new createRouter({
  // 使用history模式
  history: createWebHistory(),
  routes
});

// 5. 导出
export default router;

6. router路由的属性

path : 指定跳转的路由地址
conponent : 指定路由地址对应的组件
name : 路由记录独一无二的名称
- 可用来跳转
- 可用来配置动态路由时给某个路由增加子路由
meta : 自定义一些数据

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    name: 'home',
    path: '/home',
    component: Home,
    meth: {
      name: 'coderstar',
      age: 28
    }
  },
  {
    name: 'about',
    path: '/about',
    component: About
  }
];

7. notFound

对于哪些没有匹配到的路由，通常会匹配到固定的某个页面

01 - 路由设置

// 如果匹配到任何一个不存在的路径，就显示这个组件
{
  name: 'notFound',
  path: '/:pathMatch(.*)', // => 地址一样的显示出来  => abc/erfsdf/gsa/e
  path: '/:pathMatch(.*)*', // => 如果遇到分级，会解析 / ，变成一个数组 => ['abc','erfsdf','gsa','e']
  component: () => import('../views/NotFound.vue')
}

02 - 组件代码

<template>
  <div>NotFound : 抱歉，出错了，未找到该页面</div>
  <h2 class="not-found">出错路径为 : {{ $route.params.pathMatch }}</h2>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
console.log(route.params.pathMatch);
</script>

<style lang="less" scoped>
.not-found {
  color: red;
}
</style>

03 - 效果

Vue3 之 Vue - Router

8. router-link

router-link => 有很多属性可以配置

01 - to属性

to : 是一个字符串，或者是一个对象

指定跳转到哪个组件

<!-- 1. 字符串 -->
<router-link to="/home">Home</router-link>

<!-- 2. 对象 -->
<router-link :to="{ path: '/home' }">Home</router-link>

02 - replace属性

不设置的时候

使用的是 router.push() ，可以点击浏览器的返回，回到上一次记录页面

设置的时候

使用的是router.replace()，无法返回到上一次记录页面

<!-- 不可以回到上一个页面 -->
<router-link to="/home" replace>Home</router-link>

<!-- 可以回到上一个页面 -->
<router-link to="/about">About</router-link>

03 - active-class属性

设置激活a元素后应用的class，默认是router-link-active

默认

Vue3 之 Vue - Router

设置

<!-- 这里的类名就变成了acttttive -->
<router-link to="/home" active-class="acttttive">Home</router-link>

<!-- 这里的还是使用的默认的 -->
<router-link to="/about">About</router-link>

04 - exact-active-class属性

链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active

ps : 精准定位路由，用于嵌套路由中

四、路由懒加载分包处理

1. 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载

如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效，也可以提高首屏的渲染效率
Vue Router默认支持动态来导入组件
component可以传入一个组件，也可以接收一个函数，该函数需要放回一个Promise
import函数就是返回一个Promise

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    name: 'home',
    path: '/home',
    // 路由懒加载
    component: () => import('../views/Home.vue'),
    meth: {
      name: 'coderstar',
      age: 28
    }
  },
  {
    name: 'about',
    path: '/about',
    // 路由懒加载
    component: () => import('../views/About.vue')
  }
];

2. 分包处理

webpack从3.x开始支持对分包进行命名（chunk name）

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    name: 'home',
    path: '/home',
    // 路由懒加载
    component: () => import('../views/Home.vue'),
    meth: {
      name: 'coderstar',
      age: 28
    }
  },
  {
    name: 'about',
    path: '/about',
    // 路由懒加载,可以顺便设置分包后的名称
    component: () => import(/* webpackChunkName: 'about' */ '../views/About.vue')
  }
];

Vue3 之 Vue - Router

五、动态路由

很多时候需要将给定匹配模式的路由映射到同一个组件

例如，有一个 User 组件，它应该对所有用户进行渲染，但是用户的ID是不同的
在Vue Router中，可以在路径中使用一个动态字段来实现，称之为路径参数

1. 设置路由

{
  name: 'user',
  // 动态设定 id 和 name
  path: '/user/:id/:name',
  component: () => import('../views/User.vue')
}

2. 跳转设置

<router-link to="/user/111111/coder">User => 1</router-link>
<br />
<router-link to="/user/222222/star">User => 2</router-link>

3. 组件中获取值

<template>
  <!-- 1. 在模版中获取 -->
  <div>我是用户user => {{ $route.params.id }} - {{ $route.params.name }}</div>
</template>

<script setup>
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
// 2. 在js中获取

// 第一次获取
const route = useRoute();
console.log(route.params.id, route.params.name);

// 切换的时候获取
onBeforeRouteUpdate((to, from) => {
  // 当前
  console.log('to:', to.params.id, to.params.name);
  // 从哪里来
  // console.log('from:', from.params.id, from.params.name);
});
</script>

4. 效果

Vue3 之 Vue - Router

六、路由嵌套

路由嵌套 : 组件的内部可能有多个组件来回切换

1. 子组件创建

Vue3 之 Vue - Router

2. 路由设置

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    name: 'home',
    path: '/home',
    component: () => import('../views/Home.vue'),
    meth: {
      name: 'coderstar',
      age: 28
    },
    // 配置子路由
    children: [
      {
        // 配置重定向，默认进去 home组件 中的 A组件
        path: '/home',
        redirect: '/home/A'
      },
      {
        // 注 : 这里不需要写全称  =>  /home/a
        path: 'a',
        component: () => import('../views/HomeA.vue')
      },
      {
        // 注 : 这里不需要写全称  =>  /home/b
        path: 'b',
        component: () => import('../views/HomeB.vue')
      }
    ]
  },
  {
    name: 'about',
    path: '/about',
    component: () => import('../views/About.vue')
  },
  {
    name: 'user',
    path: '/user/:id/:name',
    component: () => import('../views/User.vue')
  },
  {
    name: 'notFound',
    path: '/:pathMatch(.*)',
    component: () => import('../views/NotFound.vue')
  }
];

3. 组件设置

<template>
  <div>我是home组件</div>
  <br />
  <!-- 导航 -->
  <router-link to="/home/a">toA</router-link>
  <br />
  <router-link to="/home/b">toB</router-link>
  
  <br />
  <br />
  <!-- 组件占位 -->
  <router-view></router-view>
</template>

4. 效果

Vue3 之 Vue - Router

5. exact-active-class属性

Vue3 之 Vue - Router

七、路由的编程式导航，代码的页面跳转

1. 简单使用

代码

<button @click="jumpClick('/home')">跳转到home组件</button> |
<button @click="jumpClick('/about')">跳转到about组件</button>


<script setup>
// 1. 导入
import { useRouter } from 'vue-router';
// 2. 使用
const router = useRouter();

// 3. 监听点击
const jumpClick = (url) => {
  // 传入 字符串
  router.push(url);

  // 传入 对象
  // router.push({
  //   path: url
  // });
};
</script>

效果

Vue3 之 Vue - Router

2. 跳转方式

01 - 通过 name 跳转并传递参数

设置

{
  name: 'home', // 用name这个属性来跳转
  path: '/home',
  component: () => import('../views/Home.vue'),
  meth: {
    name: 'coderstar',
    age: 28
  },
  children: [
    {
      path: '/home',
      redirect: '/home/A'
    },
    {
      path: 'a',
      component: () => import('../views/HomeA.vue')
    },
    {
      path: 'b',
      component: () => import('../views/HomeB.vue')
    }
  ]
},
{
  name: 'about', // 用name这个属性来跳转
  path: '/about',
  component: () => import('../views/About.vue')
}

传递

<button @click="jumpClick('home')">跳转到home组件</button> |
<button @click="jumpClick('about')">跳转到about组件</button>

<script setup>
// 1. 导入
import { useRouter } from 'vue-router';
// 2. 使用
const router = useRouter();
const jumpClick = (name) => {
  // 3. name跳转
  router.push({
    // name
    name: name,
    // 传递参数
    query: {
      message: '我是迪迦'
    }
  });
};
</script>

获取

<template>
  <div>我是about组件</div>
  <!-- 1. 模版获取 -->
  {{ $route.query }}
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
onMounted(() => {
  // 2. js中获取
  console.log('获取到的参数', route.query);
});
</script>

效果

Vue3 之 Vue - Router

缺点

子路由的重定向路由会失效，看看上方home组件的即可知道

02 - 通过 path 跳转并传递参数

设置

{
  name: 'home',
  path: '/home', // 用path这个属性来跳转
  component: () => import('../views/Home.vue'),
  meth: {
    name: 'coderstar',
    age: 28
  },
  children: [
    {
      path: '/home',
      redirect: '/home/A'
    },
    {
      path: 'a',
      component: () => import('../views/HomeA.vue')
    },
    {
      path: 'b',
      component: () => import('../views/HomeB.vue')
    }
  ]
},
{
  name: 'about',
  path: '/about', // 用path这个属性来跳转
  component: () => import('../views/About.vue')
},

传递

<button @click="jumpClick('/home')">跳转到home组件</button> |
<button @click="jumpClick('/about')">跳转到about组件</button>

<script setup>
// 1. 导入
import { useRouter } from 'vue-router';
// 2. 使用
const router = useRouter();
const jumpClick = (url) => {
  // 3. path跳转
  router.push({
    // name
    path: url,
    // 传递参数
    query: {
      message: '迪迦变身！！！'
    }
  });
};
</script>

获取

<template>
  <div>我是about组件</div>
  <!-- 1. 模版获取 -->
  {{ $route.query }}
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
onMounted(() => {
  // 2. js中获取
  console.log('获取到的参数', route.query);
});
</script>

效果

Vue3 之 Vue - Router

3. 前进后退

back

back => 想后回退

<template>
  <div class="about">
    <h2>About: {{ $route.query }}</h2>
    <button @click="backBtnClick">返回</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

function backBtnClick() {
  router.back()
}
</script>

forward

forward => 想前进步

<template>
  <div class="about">
    <h2>About: {{ $route.query }}</h2>
    <button @click="backBtnClick">返回</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function backBtnClick() {
  router.forward()
}

go

go => 可前进，可后退

<template>
  <div class="about">
    <h2>About: {{ $route.query }}</h2>
    <button @click="backBtnClick">返回</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function backBtnClick() {
  // go(1) -> forward()
  // go(-1) -> back()
  router.go(200)
}
</script>

4. push | replace

01 - push

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const jumpClick = (url) => {
  // 跳转可以回溯
  router.push(url);
};
</script>

02 - replace

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const jumpClick = (url) => {
  // 跳转不可回溯，没有记录
  router.replace(url)
};
</script>

八、动态管理路由对象

某些情况下可能需要动态的来添加路由

根据用户不同的权限，注册不同的路由

1. 添加路由

01 - 添加顶层路由

// 添加顶层路由
let isAdmin = true;
if (isAdmin) {
  router.addRoute({
    name: 'admin',
    path: '/admin',
    component: () => import('../views/Admin.vue')
  });
}

// 5. 导出
export default router;

02 - 添加次级路由

// 添加次级路由
let isAdmin = true;
if (isAdmin) {
  // 第一个参数传 父级的name
  router.addRoute('home', {
    name: 'home-a1',
    path: 'a1', // 实际上是 /home/a1
    component: () => import('../views/HomeA1.vue')
  });
}

// 5. 导出
export default router;

03 - 添加三级路由

let isAdmin = true;
if (isAdmin) {
  router.addRoute('home', {
    name: 'home-a1',
    path: 'a1',
    component: () => import('../views/HomeA1.vue')
  });

  // 三级路由，需要在 home-a1 中加上 router-view 哦
  router.addRoute('home-a1', {
    name: 'home-a2',
    path: 'a2', // 实际上是 /home/a1/a2
    component: () => import('../views/HomeA2.vue')
  });
}

// 5. 导出
export default router;

2. 删除路由

01 - 方式一

添加一个name相同的路由

新添加的路由，会把之前同名的路由给覆盖掉，因为name属性是唯一的

router.addRoute({
  name: 'home-a1',
  path: 'a1', // '/a1'
  component: () => import('../views/HomeA1.vue')
});

// 会覆盖掉上面的
router.addRoute({
  name: 'home-a1',
  path: 'a999999', // '/a999999'
  component: () => import('../views/HomeA2.vue')
});

02 - 方式二

通过removeRoute方法，传入路由的名称

router.addRoute({
  name: 'home-a1',
  path: '/a1',
  component: () => import('../views/HomeA1.vue')
});

// 删除路由
router.removeRoute('home-a1');

03 - 方式三

通过addRoute方法的返回值回调

// 1. 增加路由后，会有一个返回值方法
const removeA1 = router.addRoute({
  name: 'home-a1',
  path: '/a1',
  component: () => import('../views/HomeA1.vue')
});

// 2. 调用该返回值方法，即可删除路由
removeA1();

3. 检查路由

router.hasRoute() => 检查路由是否存在

console.log(router.hasRoute('about')); // true

router.removeRoute('about');

console.log(router.hasRoute('about')); // false

4. 获取所有路由

router.getRoutes()：获取一个包含所有路由记录的数组

console.log(router.getRoutes()); // 一个路由数组

Vue3 之 Vue - Router

九、路由导航守卫钩子

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

1. 全局的前置守卫

全局的前置守卫 beforeEach 是在导航触发时会被回调的

进行任何的路由跳转之前, 传入的beforeEach中的函数都会被回调

01 - 参数

to : 即将进入的路由Route对象
from : 即将离开的路由Route对象
next ( 可选 ) : 不推荐使用
- Vue2中是通过next函数来决定如何进行跳转的
- Vue3中是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next

02 - 返回值

false : 取消当前导航 => 不跳转
不返回或者undefined : 进行默认导航 => 该去哪去哪
返回一个路由地址 => 指定跳去哪
- 可以是一个string类型的路径
- 可以是一个对象，对象中包含path、query、params等信息

03 - 登录守卫功能栗子 ????

router.js代码

// 路由导航首位
/**
 * to : 去哪个路由
 * from : 从哪里来
 */

// 1. 设定需要登录才能进的页面
const needLoginRoutePath = ['/about', '/user/222222/star'];

router.beforeEach((to, from) => {
  // 2. 判断是否进入需要登录后才能进的页面
  if (needLoginRoutePath.includes(to.path)) {
    // 3. 获取登录状态
    const token = sessionStorage.getItem('token');
    // 4. 判断 => 如果没登录，跳转到登录页面
    if (!token) {
      // 01. 返回登录页面的路径即可
      // return '/login';
      // 02. 同时传递数据过去
      return {
        path: '/login',
        query: {
          toPath: to.path
        }
      };
    }
  }
});

// 5. 导出
export default router;

login组件代码

<template>
  <div>
    Login页面
    <br />
    账号 : <input type="text" />
    <br />
    密码 : <input type="password" />
    <br />
    <button @click="loginClick">登录</button>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 1. 监听登录按钮点击
const loginClick = () => {
  // 2. 发送请求，进行登录
  // balabalbala～
  // 3. 存储token到sessionStorage
  sessionStorage.setItem('token', '冲啊，迪迦！！！！！！');

  console.log('我要去的页面', route.query.toPath);
  // 4. 跳转到指定页面
  router.push(route.query.toPath);
};
</script>