Pinia+Router学习笔记(八)

简介: 本节记录Vue中命名路由-编程式导航相关内容
命名路由的作用:简化路由跳转,无需使用path硬编码。除了router-link外其实我们也可以使用a标签和href属性来进行跳转。但如此做会造成页面刷新(闪了一下),所以我们还是建议使用router-link

router中的定义方式如下:

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
    // 命名路由写法
        name: 'Login',
        component: () => import('../components/login.vue'),
    },
    {
    // 非命名路由写法
        path: '/reg',
        component: () => import('../components/reg.vue'),
    },
]

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

export default router

在App.vue中使用

<template>
  <h1>小满最骚</h1>
  // 注意:若要使用命名路由跳转方式则to中的内容必须是一个对象(即必须借助v-bind进行绑定)
  <router-link :to="{ name: 'Login' }">点击此处跳转至Login</router-link>
  <br>
  <router-link to="/reg">点击此处跳转至Reg</router-link>
  <router-view></router-view>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
</script>

<style scoped></style>
编程式导航:无需router-link标签即可实现跳转、传参等操作,通过在脚本中使用useRouter并调用API实现

字符串模式:

<template>
  <h1>小满最骚</h1>
  <button @click="toPage('/')">Login</button>
  <br />
  <button @click="toPage('/reg')">Reg</button>
  <router-view></router-view>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const toPage = (url: string) => {
    router.push(url)
  }
</script>

<style scoped></style>

无需多余的操作,直接push到url对应的地址,但要注意url必须是path

对象模式

<template>
  <h1>小满最骚</h1>
  <button @click="toPage('/')">Login</button>
  <br />
  <button @click="toPage('/reg')">Reg</button>
  <router-view></router-view>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const toPage = (url: string) => {
    router.push({
      path: url,
    })
  }
</script>

<style scoped></style>

将router.push()的内容由字符串改为配置对象,path对应的url即为要跳转到的url

命名式

<template>
    <h1>小满最骚</h1>
    <button @click="toPage('Login')">Login</button>
    <br />
    <button @click="toPage('Reg')">Reg</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (name: string) => {
    router.push({
        name,
    })
}
</script>

<style scoped></style>

在router.push配置对象中把path改为name,需要在index.ts里指定路由的名字

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    // 命名路由
    name: 'Login',
    component: () => import('../components/login.vue'),
  },
  {
    path: '/reg',
    name: 'Reg',
    component: () => import('../components/reg.vue'),
  },
]

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

export default router
相关文章
|
消息中间件 存储 负载均衡
一文读懂RocketMQ的高可用机制——消息发送高可用
一文读懂RocketMQ的高可用机制——消息发送高可用
656 1
|
Web App开发 移动开发 JavaScript
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
JS - 微信浏览器(H5)语音录音插件(Recorder H5)
2914 0
|
存储 资源调度 JavaScript
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
412 0
|
12月前
|
Rust 前端开发 JavaScript
Tauri 开发实践— Tauri 怎么样
Tauri 是一个用于构建高效、小型二进制文件的框架,适用于所有主流桌面及移动平台。开发人员可以利用任何可编译为 HTML、JavaScript 和 CSS 的前端框架构建应用,并借助 Rust、Swift 或 Kotlin 进行后端开发。Tauri 采用三层架构,包括 tauri-app、WRY(跨平台 Webview 库)和 TAO(跨平台窗口管理器)。相较于 Electron,Tauri 使用系统内置浏览器引擎执行 Web APP,具有更小的资源占用和更高性能。详情见:[Tauri 官网](https://tauri.app/)。
940 0
Tauri 开发实践— Tauri 怎么样
|
监控 DataWorks 前端开发
ARMS错误诊断
【8月更文挑战第22天】
173 4
|
网络协议
UDP服务器的并发方案
UDP服务器的并发方案
201 0
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
806 0
|
前端开发
CSS优先级:如何解决样式冲突?
CSS优先级:如何解决样式冲突?
|
Ubuntu Python
ubuntu升级Python版本
现在,你已成功升级了Python版本并可以使用新版本进行开发和运行程序。
918 1