Vue-Router在Vue2和Vue3中的使用示例详解

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 创建路由实例并配置路由规则
const router = new VueRouter({
  routes: [
    // 路由规则配置
    // { path: '/home', component: Home }
  ]
})
// 将路由实例挂载到Vue实例上
new Vue({
  router,
  // ...其他配置
}).$mount('#app')

import Home from '@/components/Home'
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home }
  ]
})

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

// 假设用户访问路径为/user?id=123
console.log(this.$route.query.id) // 输出：123

const router = new VueRouter({
  routes: [
    // 路由规则配置
  ]
})
router.beforeEach((to, from, next) => {
  // 在路由切换前执行的逻辑
  // 可以进行权限验证等操作
  next() // 必须调用next()才能继续路由切换
})
router.afterEach(() => {
  // 在路由切换后执行的逻辑
})

npm install vue-router@next

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由规则配置
    { path: '/home', component: Home }
  ]
})
createApp(App).use(router).mount('#app')

import Home from './components/Home.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/home', component: Home }
  ]
})

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:id', component: User }
  ]
})

// 假设用户访问路径为/user?id=123
console.log($route.query.id) // 输出：123

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由规则配置
  ]
})
router.beforeEach((to, from, next) => {
  // 在路由切换前执行的逻辑
  // 可以进行权限验证等操作
  next() // 必须调用next()才能继续路由切换
})
router.afterEach(() => {
  // 在路由切换后执行的逻辑
})