js实现vue路由

Vue 路由的基本实现

在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。

安装 Vue Router：

npm install vue-router

配置路由

创建路由配置文件（通常是 router/index.js）：

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在主应用中引入路由

在 main.js 中引入并使用路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

路由视图和导航

在 App.vue 中添加路由视图和导航链接：

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

动态路由匹配

可以通过冒号 : 标记动态路径参数：

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

在组件中访问路由参数：

this.$route.params.id

编程式导航

在 JavaScript 中实现页面跳转：

// 字符串路径
this.$router.push('/home')

// 带查询参数
this.$router.push({ path: 'register', query: { plan: 'private' } })

// 命名路由
this.$router.push({ name: 'user', params: { userId: '123' } })

路由守卫

实现导航守卫来控制路由访问：

router.beforeEach((to, from, next) => {
  // 必须调用 next()
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

懒加载路由

通过动态导入实现路由懒加载：

const UserDetails = () => import('./views/UserDetails.vue')

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

嵌套路由

实现嵌套路由：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

在父路由组件中添加 <router-view>：

<div class="user">
  <h2>User {{ $route.params.id }}</h2>
  <router-view></router-view>
</div>