vue入门到入土------路由篇

站长

2023年09月04日 23:02 · 阅读数 9

1.路由如何使用

在Vue中，我们可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方的路由管理器，它可以让我们在Vue应用程序中实现单页应用程序（SPA）的路由功能。

下面是一个简单的例子，演示如何在Vue中使用路由：

安装Vue Router

首先，我们需要安装Vue Router。可以使用npm或yarn来安装Vue Router：

npm install vue-router

或者

yarn add vue-router

创建路由实例

在Vue应用程序中，我们需要创建一个Vue Router实例。我们可以在src/router/index.js文件中创建一个Vue Router实例，并定义我们的路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在上面的代码中，我们首先导入Vue和Vue Router，然后定义我们的路由。我们定义了两个路由：/和/about，分别对应Home和About组件。

在Vue应用程序中使用路由

在Vue应用程序中，我们需要将Vue Router实例添加到Vue实例中。我们可以在src/main.js文件中添加以下代码：

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

Vue.config.productionTip = false

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

在上面的代码中，我们首先导入Vue、App组件和Vue Router实例。然后，我们将Vue Router实例添加到Vue实例中，并将Vue实例挂载到DOM元素上。

现在，我们就可以在Vue应用程序中使用路由了。我们可以在组件中使用<router-link>组件来创建链接，使用<router-view>组件来显示当前路由对应的组件。

例如，在Home组件中，我们可以添加以下代码：

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
    <router-link to="/about">About</router-link>
  </div>
</template>

在上面的代码中，我们使用<router-link>组件来创建一个链接，指向/about路由。

在App组件中，我们可以添加以下代码：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

在上面的代码中，我们使用<router-view>组件来显示当前路由对应的组件。

这就是在Vue中使用路由的基本步骤。我们可以根据需要添加更多的路由和组件，以实现更复杂的应用程序。

2.使用路由的时候项目目录

在使用Vue Router时，通常的项目目录结构如下：

├── node_modules
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── assets
│   ├── components
│   ├── router
│   │   └── index.js
│   ├── views
│   ├── App.vue
│   └── main.js
├── package.json
└── ...

其中，src目录是我们的源代码目录，router目录是我们的路由目录，index.js文件是我们的路由配置文件。在index.js文件中，我们可以定义我们的路由，例如：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在src/main.js文件中，我们可以将Vue Router实例添加到Vue实例中，例如：

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

Vue.config.productionTip = false

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

在App.vue组件中，我们可以使用<router-view>组件来显示当前路由对应的组件，例如：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

在views目录中，我们可以定义我们的页面组件，例如Home.vue和About.vue组件。

在components目录中，我们可以定义我们的公共组件，例如头部、底部、导航栏等组件。

在assets目录中，我们可以存放我们的静态资源，例如图片、样式表等。

这就是使用Vue Router时通常的项目目录结构。当然，具体的目录结构可能会因项目需求而有所不同。

3.路由在vue3中使用有何不同

Vue 3中使用路由的方式与Vue 2中有一些不同。以下是Vue 3中使用路由的主要变化：

创建路由实例的方式

在Vue 3中，我们可以使用createRouter函数来创建路由实例，而不是使用new Router语法。例如：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

export default router

在上面的代码中，我们使用createRouter函数来创建路由实例，并使用createWebHistory函数来创建路由历史记录。我们还定义了两个路由：/和/about，分别对应Home和About组件。

在Vue实例中使用路由

在Vue 3中，我们可以使用createApp函数来创建Vue实例，而不是使用new Vue语法。我们可以在createApp函数中使用use方法来添加路由实例。例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

在上面的代码中，我们使用createApp函数来创建Vue实例，并使用use方法来添加路由实例。我们还将Vue实例挂载到DOM元素上。

在组件中使用路由

在Vue 3中，我们可以使用defineAsyncComponent函数来定义异步组件，而不是使用Vue.component语法。例如：

import { defineAsyncComponent } from 'vue'

const Home = defineAsyncComponent(() => import('@/views/Home.vue'))
const About = defineAsyncComponent(() => import('@/views/About.vue'))

在上面的代码中，我们使用defineAsyncComponent函数来定义异步组件，并使用import语法来动态加载组件。

在组件中，我们可以使用<router-link>组件来创建链接，使用<router-view>组件来显示当前路由对应的组件，与Vue 2中的使用方式相同。

这就是Vue 3中使用路由的主要变化。虽然有一些不同，但是基本的使用方式和Vue 2中相似，开发者可以很快上手。

4.vue2中路由如何配合路由守卫使用

在Vue 2中，我们可以使用路由守卫来控制路由的访问权限。路由守卫是一些回调函数，它们会在路由发生变化时被调用，可以用来检查用户是否有权限访问某个路由。

Vue 2中有三种类型的路由守卫：

全局前置守卫

全局前置守卫会在每个路由切换前被调用，可以用来检查用户是否有权限访问某个路由。我们可以在路由实例中使用beforeEach方法来注册全局前置守卫。例如：

import router from './router'

router.beforeEach((to, from, next) => {
  // 检查用户是否有权限访问该路由
  if (to.meta.requiresAuth && !auth.isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

在上面的代码中，我们使用beforeEach方法来注册全局前置守卫。在守卫函数中，我们可以检查用户是否有权限访问该路由，如果没有权限，则跳转到登录页面。

路由独享守卫

路由独享守卫会在某个路由被访问时被调用，可以用来检查该路由是否有权限访问。我们可以在路由配置中使用beforeEnter方法来注册路由独享守卫。例如：

import Home from '@/views/Home.vue'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (to.meta.requiresAuth && !auth.isAuthenticated()) {
          next('/login')
        } else {
          next()
        }
      }
    }
  ]
})

在上面的代码中，我们在路由配置中使用beforeEnter方法来注册路由独享守卫。在守卫函数中，我们可以检查用户是否有权限访问该路由，如果没有权限，则跳转到登录页面。

组件内守卫

组件内守卫会在某个路由切换到该组件时被调用，可以用来检查该组件是否有权限访问。我们可以在组件中使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave方法来注册组件内守卫。例如：

export default {
  beforeRouteEnter (to, from, next) {
    // 检查用户是否有权限访问该组件
    if (to.meta.requiresAuth && !auth.isAuthenticated()) {
      next('/login')
    } else {
      next()
    }
  },
  beforeRouteUpdate (to, from, next) {
    // ...
  },
  beforeRouteLeave (to, from, next) {
    // ...
  }
}

在上面的代码中，我们在组件中使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave方法来注册组件内守卫。在守卫函数中，我们可以检查用户是否有权限访问该组件，如果没有权限，则跳转到登录页面。

这就是Vue 2中使用路由守卫的基本步骤。我们可以根据需要添加更多的守卫函数，以实现更复杂的路由控制逻辑。

路由守卫中next()函数的几种用法

在Vue Router的全局前置守卫、路由独享守卫和组件内守卫中，都可以使用next()函数来进行导航控制。具体来说，next()函数可以用于以下几种情况：

执行路由跳转

在全局前置守卫和路由独享守卫中，可以使用next()函数来执行路由跳转。例如：

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next() // 如果是登录页面，则直接跳转
  } else {
    if (isLogin()) {
      next() // 如果已登录，则允许访问
    } else {
      next('/login') // 如果未登录，则跳转到登录页面
    }
  }
})

在上面的代码中，如果用户未登录，则通过next('/login')的方式将用户跳转到登录页面。

中断当前的导航

在组件内守卫中，可以使用next(false)函数来中断当前的导航。例如：

export default {
  beforeRouteLeave(to, from, next) {
    if (this.isDirty()) {
      if (confirm('您有未保存的数据，确定要离开吗？')) {
        next() // 如果用户确认离开，则继续导航
      } else {
        next(false) // 如果用户取消离开，则中断导航
      }
    } else {
      next() // 如果没有未保存的数据，则继续导航
    }
  }
}

在上面的代码中，如果用户有未保存的数据，并且取消了离开操作，则通过next(false)的方式中断当前的导航。

中断当前的导航并跳转到新的路径

在组件内守卫中，可以使用next(path)函数来中断当前的导航，并跳转到新的路径。例如：

export default {
  beforeRouteEnter(to, from, next) {
    if (isLogin()) {
      next() // 如果已登录，则允许访问
    } else {
      next('/login') // 如果未登录，则中断当前导航，并跳转到登录页面
    }
  }
}

在上面的代码中，如果用户未登录，则通过next('/login')的方式中断当前的导航，并跳转到登录页面。

需要注意的是，在使用next()函数时，如果不传递任何参数，则表示允许当前的导航。如果需要执行路由跳转或中断导航，则需要传递相应的参数。

5.vue3中路由如何配合路由守卫使用

在Vue 3中，我们可以使用路由守卫来控制路由的访问权限。路由守卫是一些回调函数，它们会在路由发生变化时被调用，可以用来检查用户是否有权限访问某个路由。

Vue 3中有三种类型的路由守卫：

全局前置守卫

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

router.beforeEach((to, from, next) => {
  // 检查用户是否有权限访问该路由
  if (to.meta.requiresAuth && !auth.isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

export default router

路由独享守卫

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (to.meta.requiresAuth && !auth.isAuthenticated()) {
          next('/login')
        } else {
          next()
        }
      }
    }
  ]
})

export default router

组件内守卫

组件内守卫会在某个组件被访问时被调用，可以用来检查该组件是否有权限访问。我们可以在组件中使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave方法来注册组件内守卫。例如：

import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter (to, from, next) {
    // 检查用户是否有权限访问该组件
    if (to.meta.requiresAuth && !auth.isAuthenticated()) {
      next('/login')
    } else {
      next()
    }
  },
  beforeRouteUpdate (to, from, next) {
    // ...
  },
  beforeRouteLeave (to, from, next) {
    // ...
  }
})

这就是Vue 3中使用路由守卫的方式。虽然与Vue 2中有一些不同，但是基本的使用方式相似，开发者可以很快上手。

6.多级路由嵌套

在Vue项目中使用二级路由需要在路由配置文件中进行设置。下面是一个基本的二级路由的示例：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'
import Profile from '@/components/Profile'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile,
      children: [
        {
          path: 'login',
          name: 'login',
          component: Login
        }
      ]
    }
  ]
})

在上面的示例中，我们定义了四个一级路由和一个二级路由。在路由配置中，我们将 Profile 组件作为父组件，定义了一个名为 login 的子路由。要访问该子路由，需要在浏览器地址栏中输入 http://localhost:8080/profile/login。

在子路由中定义的路径是相对于父路由的路径。在上面的示例中，我们定义了 /profile 作为父路由的路径，因此子路由的完整路径为 /profile/login。

当使用嵌套路由时，父组件的模板中需要包含一个 <router-view> 标签，以便在其中渲染子组件。在上面的示例中，Profile 组件的模板中包含了一个 <router-view> 标签，这样在访问子路由时，子组件就会渲染在这个位置上。

当使用 Vue Router 时， <router-view> 标签通常会在组件模板中作为占位符使用，以便在访问不同的路由时动态地渲染组件。

下面是一个简单的示例，演示了在 Vue.js 应用程序中使用 <router-view> 标签的位置：

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

在上面的示例中，我们在 App.vue 组件的模板中使用了 <router-view> 标签，作为动态渲染组件的占位符。这个标签的位置决定了在访问不同的路由时，组件将被渲染到什么位置。

当我们访问 / 路径时，Home 组件将会渲染在 <router-view> 标签的位置上；当我们访问 /about 路径时，About 组件将会渲染在同一个位置上。这就是使用 <router-view> 标签的位置。

在一个嵌套路由的情况下，我们需要在父组件的模板中包含 <router-view> 标签，以便在子路由中动态地渲染组件。

因此，在 Profile 组件中，我们需要在模板的适当位置包含一个 <router-view> 标签，以便在访问 /profile/login 路径时渲染 Login 组件。

下面是一个简单的示例，演示了如何在 Profile 组件中包含 <router-view> 标签：

<template>
  <div>
    <h2>User Profile</h2>
    <p>This is the user profile page.</p>
    <router-view></router-view>
  </div>
</template>

在上面的示例中，我们在 Profile 组件的模板中包含了一个 <router-view> 标签，它的作用是在访问 /profile/login 路径时动态地渲染 Login 组件。

需要注意的是，我们在 Profile 组件中定义了一个子路由，这个子路由的路径是相对于父路由的。因此，在 Profile 组件的模板中包含 <router-view> 标签的位置，也应该是相对于父组件的，以便正确地渲染子组件。

当访问 /profile/login 路径时，Vue Router 将会匹配到 Profile 组件，并在 <router-view> 标签的位置上渲染 Login 组件。

7.路由懒加载

路由懒加载是一种优化技术，用于在Vue等前端框架中，从按需加载的角度来提高页面加载效率。在路由懒加载中，路由组件是按照需要加载的方式动态加载的，而不是在应用程序初始加载时就加载所有的路由组件，这种方式可以更快地加载初始化页面并且减少资源的消耗。

路由懒加载可以通过使用webpack或者Vue提供的异步组件实现，当使用这种技术时，路由组件只会在页面的第一次访问时加载，这意味着它将只在需要时加载所需的资源。这有助于优化应用程序的性能，并且可以提高用户体验。

举个例子，如果你的应用程序中有几个很大的模块或路由，那么就会增加首次加载的时间。通过使用路由懒加载技术，你可以最大限度地提高应用程序的响应速度，响应速度更快可以带来更好的用户体验。

对于较大的单页面应用程序来说，将组件按照需加载的方式使用路由懒加载技术，也可以有效地降低整体应用程序的负载，并提高应用程序的渲染速度。

在vue中实现路由懒加载，可以使用import()动态导入语法，先将需要懒加载的路由组件单独打包成一个js文件，然后在路由配置中使用import()动态导入。

例如，我们有一个需要懒加载的路由组件HelloWorld：

// HelloWorld.vue

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

我们将其单独打包成一个js文件：

// HelloWorld.js

import HelloWorld from '@/components/HelloWorld.vue'

export default [
  {
    path: '/hello',
    name: 'Hello',
    component: HelloWorld
  }
]

然后在路由配置中使用import()动态导入：

// router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/hello',
    name: 'Hello',
    component: () => import('@/components/HelloWorld.js')
  }
]

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

export default router

这样，在需要使用HelloWorld路由的时候才会去加载这个js文件，从而实现路由懒加载的效果。

8.路由的几个api

在Vue Router中，我们可以使用以下几个API来进行路由跳转：

1. router.push(location, onComplete?, onAbort?)

这个方法会向history栈中添加一个新的记录，并且导航到指定的路径。它的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

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

// 对象形式
router.push({ path: '/home' })

如果需要在导航成功或失败时执行回调函数，可以传递onComplete和onAbort函数。

2. router.replace(location, onComplete?, onAbort?)

这个方法与push方法类似，不同的是它不会向history栈中添加新记录，而是替换当前的记录。例如：

router.replace('/home')

如果需要在导航成功或失败时执行回调函数，可以传递onComplete和onAbort函数。

3. router.go(n)

这个方法可以在history栈中向前或向后移动n个记录。例如：

// 后退一步
router.go(-1)

// 前进一步
router.go(1)

以上就是Vue Router中常用的几个路由跳转API。需要注意的是，在Vue组件中，我们可以通过this.router来访问router实例。另外，如果需要在Vue组件中进行路由跳转，可以使用this.router来访问router实例。另外，如果需要在Vue组件中进行路由跳转，可以使用this.router来访问router实例。另外，如果需要在Vue组件中进行路由跳转，可以使用this.router.push()、this.$router.replace()等方法来实现。

9.路由跳转携带参数的几种方法

1. 使用路由参数

可以在路由定义中使用动态路由参数来传递参数。例如：

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

在这个例子中，我们定义了一个名为“id”的动态路由参数。在跳转到该路由时，可以通过在URL中添加参数来传递值，例如：

router.push('/user/123')

在User组件中，可以通过props属性来接收该参数：

export default {
  props: ['id'],
  // ...
}

2. 使用查询参数

可以在URL中使用查询参数来传递参数。例如：

router.push({ path: '/user', query: { id: '123' }})

在User组件中，可以通过$route对象的query属性来获取该参数：

export default {
  // ...
  mounted() {
    const id = this.$route.query.id
    // ...
  }
}

3. 使用状态参数

可以使用路由的状态参数来传递参数。例如：

router.push({ name: 'user', params: { id: '123' }, meta: { requiresAuth: true }})

在User组件中，可以通过$route对象的params属性来获取该参数：

export default {
  // ...
  mounted() {
    const id = this.$route.params.id
    // ...
  }
}

以上是在Vue中路由跳转时携带参数的几种方法。根据具体的需求，可以选择适合自己的方法来传递参数。