Vue - route路由跳转

前言

vue中的route实现了从一个页面跳转到另一个页面的功能

基本路由跳转

• router.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/home.vue'
import Detail from '../views/detail'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail
  }
]

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

export default router

router-link 跳转路由

• 实现首页跳转详情页

---

• route-link相当于a标签跳转，其指定route-view显示的内容
• App.vue

• home.vue

• detail.vue

router.push(path) 跳转路由

• 通过路由的path属性实现首页跳转详情页

• App.vue

• home.vue

router.push(name) 跳转路由

• 通过路由的name属性实现首页跳转详情页

• App.vue

• home.vue

嵌套路由跳转

• 实现详情页跳转详情子页面

---

• route.js

{
  path: '/detail',
  name: 'Detail',
  component: Detail,
  children: [
    {
      path: '',
      name: 'DetailHome',
      component: DetailHome
    },
    {
      path: 'sub',
      name: 'SubDetail',
      component: SubDetail
    }
  ]
}

• detail.vue

• detail-home.vue

• sub-detail.vue

- End - ﹀ ﹀ ﹀ 梦想是咸鱼 关注一下吧