1. 安装 vue-router

npm install vue-router@4 -S

2. 创建vue-router配置文件

创建 src\router\index.js

import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      component: () => import("@/views/home/Home"),
      meta: {
        isAuth: true,
      },
    },
    {
      path: "/home",
      name: "home",
      component: () => import("@/views/home/Home"),
      meta: {
        isAuth: true,
      },
    },
    {
      path: "/login/:uname/:pwd",
      name: "login",
      component: () => import("@/views/login/Login"),
      meta: {
        isAuth: false,
      },
    },
    {
      path: "/register",
      name: "register",
      component: () => import("@/views/register/Register"),
      meta: {
        isAuth: false,
      },
    },
  ],
});

router.beforeEach((to, from, next) => {
  // console.log(to);
  // console.log(from);
  next()
  // if (to.meta.isAuth) {
  //   if (localStorage.token) {
  //     next();
  //   } else {
  //     router.push("/login");
  //   }
  // } else {
  //   next();
  // }
});

export default router;

3. 在 main.js 中加载 vue-router 配置文件

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

createApp(App).use(router).mount('#app')

4. 定义路由出口

在 App.vue 中定义路由出口

<template>
  <router-view></router-view>
</template>

5. 在组件中使用路由

在 src\views\home\Home.vue 中调用路由

• v4版本后禁用了vue-router的隐式 params 传参，可用vuex方案来代替
• 动态传参方式 /login/100/200，依然可以使用，需要在路由配置文件中配置参数名，此方式使用params来接收参数

<template>
  <h1>home</h1>
  <div>
    <router-link to="/home">⾸⻚</router-link>
    <router-link :to="{path: '/login/zhangsan/123456',query:{id:'200'}}">登录页</router-link>
    <router-link to="/register">注册页</router-link>
  </div>
  <hr>
  <div>
    <div @click="toMainPage(1)">⾸⻚</div>
    <div @click="toMainPage(2)">登录页</div>
    <div @click="toMainPage(3)">注册页</div>
  </div>
</template>
    
  <script>
import { useRouter } from "vue-router";
export default {
  name: "home",
  setup() {
    const router = useRouter();

    function toMainPage(n) {
      switch (n) {
        case 1:
          router.push({
            path: "/home",
            query: {
              id: "100",
            },
          });
          break;
        case 2:
          router.replace({
            path: "/login/zhangsan/123456",
            query: {
              id: "200",
            },
          });
          break;
        case 3:
          router.push({
            path: "/register",
            query: {
              id: "300",
            },
          });
          break;
        default:
          break;
      }
    }

    return {
      toMainPage,
    };
  },
};
</script>

5. 获取路由参数

在 src\views\login\Login.vue 中获取参数

• 虽然隐式params传参被禁用，但是动态传参也用 route.params 来接收参数

<template>
    login
  </template>
  
  <script>
  import { useRoute } from "vue-router";
  export default {
    name: "login",
    setup(){
        const route = useRoute();
        console.log(route.query?.id); // 100
        console.log(route.params); // {a: '100', b: '200'}
    }
  };
  </script>