js实现vue路由

实现 Vue 路由的 JavaScript 方法

在 Vue 中实现路由通常使用 Vue Router 库。以下是基于原生 JavaScript 和 Vue Router 的实现方式：

安装 Vue Router

使用 npm 或 yarn 安装 Vue Router：

npm install vue-router

基本路由配置

创建一个路由实例并配置路由规则：

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: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

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

路由视图和导航

在 Vue 组件中使用 <router-view> 和 <router-link>：

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

动态路由匹配

使用冒号标记动态路径参数：

const routes = [
  { path: '/user/:id', component: User }
]

编程式导航

在 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) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({ path: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

懒加载路由

使用动态导入实现路由懒加载：

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

嵌套路由

实现嵌套路由视图：

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

路由模式

配置路由模式（hash 或 history）：

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

命名路由和命名视图

使用命名路由和多个命名视图：

const routes = [
  {
    path: '/settings',
    components: {
      default: Settings,
      helper: Helper
    }
  }
]

以上方法涵盖了 Vue Router 的主要功能，可以根据项目需求选择适合的路由实现方式。