vue-router@4-优快云博客

本文链接：https://blog.youkuaiyun.com/MM_520131400/article/details/124456925

本文详细介绍了如何使用Vue.js的Vue Router进行单页应用的路由管理。从安装Vue Router到创建历史模式、哈希模式的路由，再到组件内部使用路由和传递参数，一步步展示了Vue Router的基本用法。同时，还涵盖了路由守卫的概念，包括全局前置、后置守卫以及组件内的路由守卫，为实际项目开发提供了全面的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、简介

让用 Vue.js 构建单页应用变得轻而易举（简单来说就是通过hash跳转）

二、安装

//npm
npm install vue-router@4
//yarn
yarn add vue-router@4

三、写法

// router/index.js
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import {dynamicRoutes} from "./routers"

const routes: Array<RouteRecordRaw> = dynamicRoutes

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
-----------------------------------------------------------------
// main.js
import { createApp } from "vue";
const app = createApp(App);
import App from "./App.vue";
//引用路由
import router from "./router/index";

app.use(router).mount("#app");

四、history配置

history	createWebHistory()
hash	createWebHashHistory()
abstract	createMemoryHistory()

// 新写法
import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(),//history
  routes
})

export default router

五、组件使用

在 setup 中访问路由和当前路由

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this. $r o u t e r 或 t h i s .$ route。作为替代，我们使用 useRouter 函数：

useRouter（跳转）, useRoute（获取路由参数）

import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    
  },
}

六、路由传值

useRouter（路由方法）, useRoute（路由属性）

传递参数

import {defineComponent } from "vue";
import { useRouter } from 'vue-router'
export default defineComponent({
    setup() {
        const $router = useRouter()
           // 命名路由
            let toAbout=()=>{
            $router.push({name:'About',params:{id:1}})    //传递参数
            }
       
           //query传值
            let toNews=()=>{
            $router.push({path:'/news',query:{id:2}})    //传递参数
            }

           return {
               toAbout,
               toNews
           };
    }
})

接收参数

import {defineComponent } from "vue";
import { useRoute } from 'vue-router'
export default defineComponent({
    setup() {
      const $route = useRoute()
      onMounted(()=>{
        console.log($route.params.id)        //   打印 params 的参数
        
        console.log($route.query.id)         //   打印 query 的参数
      })
    },
})