vue简述路由实现步骤

Vue 路由实现步骤

安装 Vue Router

通过 npm 或 yarn 安装 Vue Router 依赖包：

npm install vue-router

创建路由实例

在项目中新建一个路由配置文件（如 router/index.js），引入 Vue 和 Vue Router，并定义路由规则：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

注入路由到 Vue 实例

在 main.js 中导入路由配置并挂载到 Vue 实例：

import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用路由视图和导航

在组件模板中使用 <router-view> 作为路由出口，并通过 <router-link> 实现导航：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

动态路由与参数传递

定义动态路由时使用冒号 : 标记参数，通过 $route.params 或 props 接收参数：

{ path: '/user/:id', component: User }

组件内获取参数：

this.$route.params.id

导航守卫

通过路由守卫（如 beforeEach）实现权限控制或页面跳转逻辑：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) next('/login')
  else next()
})

懒加载路由组件

使用动态导入语法实现路由组件的懒加载，优化首屏性能：

component: () => import('../views/About.vue')