Vue3中路由基本使用

客官°小女子只卖身不卖艺 2024-03-30 16:04 27阅读 0赞

## Vue3中路由基本使用 ##

### 引入路由 ###

1、首先需要在项目中使用下面的命令引入路由

npm install vue-router@4

2、创建一个router文件夹，存放和路由相关的代码，创建index.js

import {
         createRouter, createWebHashHistory } from 'vue-router'
    
    
    const routes = [
        //定义路由
        {
        
            //路由path
            path: '/el_test',
            //路由name
            name: '/el_test',
            //路由组件
            component: () => import('@/components/el_test.vue')
        },
        {
        
            path: '/home',
            name: '/home',
            component: () => import('@/components/HelloWorld.vue')
        }
    ]
    
    // 创建路由对象
    const router = createRouter({
        
        //hash模式的路由
        history: createWebHashHistory(),
        routes
    })
    
    export default router

3、在main.js中导入路由组件，并挂载到根实例上

import router from '@/router/index'
    
    createApp(App)
        //挂载ElementPlus
        .use(ElementPlus)
        //挂载路由
        .use(router)
        .mount('#app');

### 测试 ###

在App.Vue中使用router-link组件测试路由是否生效。router-link在页面上会显示一个超链接，点击超链接会跳转到to属性指定的页面，而页面显示的内容由路由中的component属性指定。

<template>
      
      
      <router-link to="/home">go to home</router-link>
      <router-link to="/el_test">go to ElTest</router-link>
    
      
      
      <router-view></router-view>
    
    </template>

效果如下：  
![在这里插入图片描述][88c1861357694337824d55aa25d41195.png]  
![在这里插入图片描述][ea467c30d2a7486b93deb74ec52cf922.png]

### 参考 ###

1.  [Vue router文档][Vue router]
2.  [vue3.0路由route/router的使用][vue3.0_route_router]
3.  [vue3.0路由注册][vue3.0]
4.  [vue3最全路由使用教程][vue3]

[88c1861357694337824d55aa25d41195.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/db1bc3f8ae344ac99c546827db7b1076.png
[ea467c30d2a7486b93deb74ec52cf922.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a6d8dd547d2240f7bb7530174a84c19f.png
[Vue router]: https://router.vuejs.org/zh/guide/#html
[vue3.0_route_router]: https://blog.csdn.net/qq_44775782/article/details/109219297
[vue3.0]: https://blog.csdn.net/qq_39844855/article/details/115952324
[vue3]: https://blog.csdn.net/begefefsef/article/details/123304297