当前位置: 首页 > news >正文

路由组件1

### 笔记

#### 一、安装:`yarn add vue-router`

#### 二、实例化

  * 从 vue-router 中引入 createRouter:`import { createRouter, createWebHistory } from "vue-router"`

  * 创建路由器实例:

    * `let router = createRouter(参数对象)`

```javascript

export const router = createRouter({

    history: createWebHistory(),

    routes: routes

})

```

#### 三、路由定义

  * 定义路由数组

```javascript

export const routes = [

    {

        path: '/',

        component: ()=>import('@/components/Home.vue')

    },

    {

        path: '/Profile',

        component: ()=>import('@/components/Profile.vue')

    }

]

```

#### 四、组件使用

  * 在模板中使用 RouterView 作为路由出口,用于渲染匹配路径对应的组件:`<RouterView></RouterView>`

  * 使用 RouterLink 进行导航:

    * `<RouterLink to="/">首页</RouterLink>`

    * `<RouterLink to="/profile">用户资料页</RouterLink>`

  * 在 script setup 中使用 useRouter 和 useRoute:

```javascript

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

let Route = useRoute()

let Router = useRouter()

function btn() {

    if (Route.fullPath === '/') {

        Router.push('/Profile')

    } else {

        Router.push('/')

    }

    console.log(Route);

}

```

#### 五、应用挂载

  * 引入路由器并挂载到应用上:

    * `import router from './router'`

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


 

相关文章:

  • java volatile关键字
  • 二分系列题
  • 什么是AIOps
  • TDengine 在智慧油田领域的应用
  • 多序列比对软件 Clustal Omega 介绍
  • 嵌入式培训之C语言学习完(十七)结构体、共用体、枚举、typedef关键字与位运算
  • 信息系统项目管理师-软考高级(软考高项)​​​​​​​​​​​2025最新(十二)
  • 随笔-近况
  • 43.防雷击浪涌设计
  • VBA高级应用30例应用4:利用屏蔽事件来阻止自动运行事件
  • 气动带刮刀硬密封固定式对夹球阀:专为高粘度、强腐蚀性介质设计的工业解决方案-耀圣
  • 聊一部很癫的电影
  • 嵌入式学习笔记 - 垂直消隐期
  • vue数据可视化开发常用库
  • [特殊字符]渲染 101 云渲染:C4D XP 粒子创作者的高效解算新方案
  • World of Warcraft [CLASSIC][80][Deluyia] [Fragment of Val‘anyr]
  • 系统的从零开始学习电子的相关知识,该如何规划?
  • [C++类和对象]类和对象的引入
  • 应急响应基础模拟靶机-security1
  • 电位器如何接入西门子PLC的模拟量输入
  • 解放军仪仗分队参加白俄罗斯纪念苏联伟大卫国战争胜利80周年阅兵活动
  • 赵作海因病离世,妻子李素兰希望过平静生活
  • 浙江一民企拍地后遭政府两次违约,“民告官”三年又提起民事诉讼
  • 新疆维吾尔自治区乌鲁木齐市米东区政协原副主席朱文智被查
  • 最快3天开通一条定制公交线路!上海推出服务平台更快响应市民需求
  • 网民反映“潜水时遭遇服务质量不佳”,三亚开展核查调查