当前位置: 首页 > 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的模拟量输入
  • 关于做女装的网站/推广普通话主题手抄报
  • 共和网站建设公司/好看的web网页
  • 网站背景跟着鼠标动的图怎么做/百度网盘搜索神器
  • 重庆网站建设夹夹虫公司.可信/正安县网站seo优化排名
  • 百度网站建设技术/电商网站规划
  • 做地方行业门户网站需要什么资格/网盘搜索引擎入口