path

path

命名路由

除了 path 之外，你还可以为任何路由提供  name。这有以下优点：

• 没有硬编码的 URL
• params  的自动编码/解码。
• 防止你在 url 中出现打字错误。
• 绕过路径排序（如显示一个）

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

router-link 跳转方式需要改变 变为对象并且有对应 name

<h1>小满最骚</h1>
<div>
  <router-link :to="{name:'Login'}">Login</router-link>
  <router-link style="margin-left:10px" :to="{name:'Reg'}">Reg</router-link>
</div>
<hr />

编程式导航

除了使用  <router-link>  创建 a 标签来定义导航链接，我们还可以借助 router 的 实例方法 ，通过编写代码来实现。

1.字符串模式

import { useRouter } from 'vue-router'
const router = useRouter()

const toPage = () => {
  router.push('/reg')
}

2.对象模式

import { useRouter } from 'vue-router'
const router = useRouter()

const toPage = () => {
  router.push({
    path: '/reg'
  })
}

3.命名式路由模式

import { useRouter } from 'vue-router'
const router = useRouter()

const toPage = () => {
  router.push({
    name: 'Reg'
  })
}

a 标签跳转

直接通过 a href 也可以跳转但是会刷新页面

 <a href="/reg">rrr</a>

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq1195566313/article/details/123589648