vue3 - 33.router.3 - 命名路由 - 编程式导航

最新推荐文章于 2024-08-20 22:07:03 发布

啦啦朵朵

最新推荐文章于 2024-08-20 22:07:03 发布

阅读量234

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_34111842/article/details/127843487

版权

本文介绍了在Vue.js应用中如何使用name属性进行路由跳转，强调了这种方式的好处，包括避免硬编码URL、自动编码解码params、防止拼写错误和绕过路径排序。示例代码展示了在`router/index.ts`中定义路由名称，以及在组件中使用`RouterLink`和`useRouter`进行编程式导航。

摘要由CSDN通过智能技术生成

当页面发生跳转的时候，router的跳转方式除了path，还可以通过name进行跳转

用name进行跳转的好处是：
1.没有硬编码的URL
2.params会自动编码/解码
3.防止我们在url中出现名字拼写错误
4.绕过路径排序

我们如果想通过name进行跳转，那我们只需要在路由当中定义name即可：

router/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        name:'login',
        component:() => import('../views/admin/login.vue')
    },{
        path:'/index',
        name:'index',
        component:() => import('../views/index/index.vue')
    }
]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default router

在页面中：

<template>
  <div>
    <div>
      <RouterLink :to="{name:'login'}">login</RouterLink>
      <br />
      <RouterLink :to="{name:'index'}">index</RouterLink>
    </div>
  </div>
</template>
<script setup lang='ts'>
  import { RouterLink } from 'vue-router';
</script>

2.除了通过name进行命名路由，还有我们可以通过编程式导航进行页面跳转：

同时我们需要在vue-router当中声明跳转的方法：useRouter

在页面中：

<template>
  <div>
    <div>
      <button @click="handleToLogin">login</button>
      <br />
      <button @click="handleToIndex">login</button>
    </div>
  </div>
</template>
<script setup lang='ts'>
  import { useRouter } from 'vue-router';
  const router = useRouter()
  const handleToLogin = () => {
    // router.push({path:'/'})
    router.push({name:'login'})
  }
  const handleToIndex = () => {
    // router.push({path:'/index'})
    router.push({name:'index'})
  }
</script>