Vue.js路由基础

Vue.js路由基础

一.路由的基本配置

1.安装路由
在cmd控制台上输入

npm install vue-router@next

2.创建路由实例和配置文件
在src目录下创建一个新的文件夹，例如router，然后在该文件夹下创建一个新的文件，例如index.js。在index.js文件中，创建一个路由实例并配置路由。
(一开始下载vite配置vue时可以直接一起配置了会自动下载router文件）
3.使用路由
打开main.js文件，导入刚刚创建的路由实例，并在创建Vue应用程序时使用该路由实例。

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

createApp(App).use(router).mount('#app')

二.RouterView和RouterLink

router-view和router-link是Vue Router提供的两个核心组件，用于在Vue应用程序中实现路由功能。

router-view是一个用于显示当前路由组件的占位符组件。当路由切换时，router-view会根据当前路由的路径匹配到的组件来动态渲染显示。你可以将router-view放置在任何你希望显示路由组件的地方。
以下是一个示例，演示了如何在App.vue中使用router-view：

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

在上面的示例中，会根据当前路由的路径匹配到的组件来动态渲染显示。

router-link是一个用于创建路由链接的组件。它会自动根据提供的to属性生成正确的URL，并处理路由导航。你可以将router-link用作普通的HTML链接，并指定目标路径。
以下是一个示例，演示了如何在App.vue中使用router-link：

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

在上面的示例中，router-link会生成两个链接，分别指向根路径/和/about。当用户点击这些链接时，Vue Router会自动处理路由导航，并显示匹配到的组件。

需要注意的是，router-link在生成的链接上会自动添加active类，可以方便地为当前激活的链接添加样式。

三.路由跳转和传参

首先，确保你已经安装并配置好了Vue Router。

在Vue组件中，可以使用组件来进行路由跳转。例如：

<router-link to="/about">Go to About Page</router-link>

如果需要传递参数，可以通过在to属性中使用对象的方式和使用?拼接字符串来传递参数

	<router-link :to="{ path: '/details', query: { id: 1, name: 'John' }}">Go to Details Page</router-link>
		<router-link to="/detail?goodsid=123124234&count=20">aaa</router-link>
		<router-link :to="{path:'/detail',query:{x:123,y:123}}">xxx</router-link>
		<div v-for="el in arr" :key="el.id" @click="fn(el.id)">{{el.title}}</div>

在目标组件中，可以通过$route对象来获取传递的参数。例如：

export default {
  mounted() {
    console.log(this.$route.query.id); // 输出：1
    console.log(this.$route.query.name); // 输出：'John'
  }
}

如果需要通过动态路由传递参数，可以在路由配置中使用占位符来定义动态参数。

在这里插入代码片const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

在目标组件中，可以通过$route.params来获取动态路由传递的参数。

export default {
  mounted() {
    console.log(this.$route.params.id); // 输出：动态路由传递的参数
  }
}

四.路由嵌套

在Vue Router中，可以使用路由嵌套来构建复杂的页面布局和层级关系。路由嵌套允许你在一个父路由下定义子路由，以实现嵌套的组件结构。

  {
    path: '/',
    component: Home,
    children: [
      {
        path: '',
        component: Dashboard
      },
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }

在上面的示例中，根路径 ‘/’ 对应的组件是 Home，而 ‘/’ 下的子路由分别是 ‘/’、‘/profile’ 和 ‘/settings’，分别对应的组件是 Dashboard、Profile 和 Settings。我这个是使用导入的方式引入组件，也可以使用异步组件来引入，其实更推荐使用异步组件来引入。

<template>
  <div>
    <h1>App</h1>
    <router-view></router-view>
  </div>
</template>

当访问根路径 ‘/’ 时，会渲染 Home 组件，并在 中渲染子组件 Dashboard。当访问 ‘/profile’ 时，会渲染 Home 组件，并在 中渲染子组件 Profile。

五.路由守卫

路由守卫是一种在导航过程中控制访问的机制。在Vue.js中，可以使用路由守卫来添加代码，以在路由导航之前、之后或期间执行特定的操作。常见的路由守卫有全局前置守卫、全局后置守卫、路由独享守卫和组件内的守卫。

1.全局前置守卫

使用 router.beforeEach 方法添加全局前置守卫。它会在每次路由切换之前被调用，可以用于检查用户是否有权限访问某个路由或执行一些其他操作。

router.beforeEach((to, from, next) => {
  // 在这里执行你的逻辑
  // 检查用户是否登录，是否有权限访问路由等等
  // 如果用户有权限，则调用 next() 方法，否则调用 next(false) 或者 next('/login') 等跳转到其他路由
})

2.全局后置守卫

使用 router.afterEach 方法添加全局后置守卫。它会在每次路由切换之后被调用，可以用于执行一些收尾操作，比如清除页面数据、发送统计信息等。

router.afterEach((to, from) => {
  // 在这里执行你的逻辑
  // 比如发送统计信息等
})

3.路由独享守卫

在定义路由时，可以使用 beforeEnter 方法添加路由独享守卫。它会在该路由被访问之前被调用，可以用于检查用户权限或执行其他操作。

const routes = [
  {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
      // 在这里执行你的逻辑
      // 检查用户是否有权限访问该路由等等
      // 如果用户有权限，则调用 next() 方法，否则调用 next(false) 或者 next('/login') 等跳转到其他路由
    }
  }
]

4.组件内的守卫

在 Vue 组件内部，可以使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 三个方法来添加组件内的守卫。

 {
  beforeRouteEnter(to, from, next) {
    // 在这里执行你的逻辑
    // 在组件被渲染之前调用
  },
  beforeRouteUpdate(to, from, next) {
    // 在这里执行你的逻辑
    // 在当前路由改变，但是该组件被复用时调用
  },
  beforeRouteLeave(to, from, next) {
    // 在这里执行你的逻辑
    // 在当前路由改变，离开该组件时调用
  }
}

5.beforeResolve

beforeResolve 是 Vue Router 中的一个路由守卫。它是在导航被确认之前，同时在所有 beforeEach 守卫和组件内的守卫被调用之后被调用。

它的作用是确保在导航被确认之前，异步路由组件和钩子函数中的异步操作都已经解析完毕。这样可以确保在渲染路由组件之前，所有需要的数据都已经准备好了。
你可以通过在 router.beforeResolve 方法中添加 beforeResolve 守卫：

router.beforeResolve((to, from, next) => {
  // 在这里执行你的逻辑
  // 确保异步操作已经完成，例如通过 Promise 或者其他异步操作获取数据
  // 如果异步操作需要一段时间才能完成，可以在这里显示 loading 状态
  // 异步操作完成后，调用 next() 方法继续导航
})

需要注意的是，beforeResolve 守卫只在导航被确认之前被调用一次，而不像 beforeEach 守卫会在每次导航之前都被调用。

使用 beforeResolve 守卫可以确保在导航到某个路由之前，所有需要的异步操作都已经完成，从而避免在渲染组件时出现数据不完整或错误的情况。