命名路由

命名路由 | Vue Router (vuejs.org) (opens new window)

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

没有硬编码的 URL
params 的自动编码/解码。
防止你在url中出现打字错误。

在route/index.ts

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

1
2
3
4
5
6
7
8
9
10
11
12

router-link (opens new window)跳转方式变为对象并且有对应name

<div>
    <router-link :to="{name:'Login'}">Login</router-link>
	<router-link style="margin-left:10px" :to="{name:'Reg'}">Reg</router-link>
</div>

1
2
3
4

# 编程式导航

还可以借助 router 的实例方法，通过编写代码来实现。

字符串模式

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

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

1
2
3
4
5
6

对象模式

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

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

1
2
3
4
5
6
7
8

命名式路由模式

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

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

1
2
3
4
5
6
7
8

a标签跳转

直接通过a标签，href也可以跳转但是会有默认行为（刷新页面）

上次更新: 2024/08/14, 04:14:33

← 路由模式历史记录→