Vue Router(第二章)

53 阅读1分钟

除了path之外,还提供了name属性

const routes = [
  { path: '/', name: 'A', component: () => import('../components/A.vue') },
  { path: '/b', name: 'B', component: () => import('../components/B.vue') },
]

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

<router-link :to="{ name: 'A' }">去A</router-link>

编程式导航

除了router-link跳转,还可以借助router的实例方法,实现js跳转

import { useRouter } from 'vue-router'

const router = useRouter()
const jump = () => {
  // 1 字符串
  // router.push('/b')
  
  //2 对象-path
  // router.push({
  //   path: '/b',
  // })
  
  // 3 对象-name
  router.push({
    name: 'B',
  })
}