跳到主要内容

vue-router

vue-router 采用单例模式 vue.use(vue-router) => 执行 vue-router.install()

vue-router 3.0​

vue-router 4.0​

基本使用​

安装 vue-router​

npm install vue-router@next --save

初始化目录​

// /src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
 history: createWebHashHistory(),
 routes: [{
    path: '/',
    redirect: '/home'
  }, {
    name: 'Home',
    path: '/home',
    component: () => import('@/views/home.vue')
  }, {
    name: 'Profile',
    path: '/profile',
    component: () => import('@/views/home.vue')
  }]
})
export default router

引用 vue-router​

// /src/main.js
import router from './router'
app.use(router)

App.vue 添加视图​

<router-view></router-view>

页面使用路由相关​

import { definedComponent, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default definedComponent({
 name: 'xxx',
 setup () {
  const router = useRouter()
  const route = useRoute()
  console.log(router)
  console.log(route)
 }
})

配合 typescript​

// router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [{
    path: "/",
    name: "home",
    meta: {
        title: "首页"
    },
    component: () => import("@/views/Home.vue")
}]

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

export default router