vue-router

1. 安装

  npm install vue-router

2. 创建路由对象

在src下创建router文件夹，并在router文件夹下创建index.js文件

// /src/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;

3. 在main.js中使用

// main.js
import { createApp } from 'vue';
import App from './App.vue';
 
// 1. 导入路由对象
import router from './router';
 
// 2. 使用use调用一下
createApp(App).use(router).mount('#app');

4. router路由属性

• path：指定跳转的路由地址
• component：指定路由地址对应的组件
• name：路由记录的名称
  • 可以使用name属性来跳转
  • 可用来配置动态路由时给某个路由增加子路由
• meta : 自定义一些数据

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

5. notFound设置

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

6. 动态路由

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

• 例如，有一个 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>

7. 路由嵌套

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

  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')
    }
  ];

8. 路由守卫

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

1. 全局前置守卫

全局的前置守卫 beforeEach 是在导航触发时会被回调的，进行任何的路由跳转之前, 传入的beforeEach中的函数都会被回调

  // 路由导航首位
  /**
  * 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;