vue路由教程

路由原理

路由是指根据请求的URL路径，将请求导向相应的处理程序或资源的过程。在Web开发中，路由通常用于实现单页应用（SPA）或多页面应用（MPA）的页面导航和页面切换。

在前端开发中，路由的实现原理可以分为两种主要方式：基于哈希（Hash）和基于历史记录（History）。
基于哈希（Hash）的路由：

1. 在URL中使用哈希（#）来表示路由，如：http://example.com/#/home。
   当浏览器接收到带有哈希的URL时，不会向服务器发送请求，而是触发浏览器的hashchange事件。
   JavaScript监听hashchange事件，根据哈希值的变化，通过相应的处理逻辑，渲染对应的组件或页面内容。
   基于历史记录（History）的路由：

2. 使用浏览器的history对象来管理路由。
   当用户点击链接或执行页面导航操作时，JavaScript通过history.pushState()或history.replaceState()方法修改浏览器的URL，而不会触发页面的刷新。
   同样，JavaScript监听popstate事件，根据URL的变化，执行相应的处理逻辑，更新组件或页面内容。

无论是基于哈希还是基于历史记录的路由，关键在于监听URL的变化，并根据变化的URL匹配对应的路由规则，从而执行相应的操作，如加载对应的组件、刷新页面内容等。

安装Vue Router：在Vue项目中，你可以使用npm或yarn等包管理工具安装Vue Router。

npm install vue-router

创建路由实例：在Vue项目中，你需要创建一个路由实例，其中定义了路由的配置信息，包括URL路径和对应的组件。

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

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

在上面的代码中，我们创建了两个路由规则，/对应Home组件，/about对应About组件。

注册路由实例：在Vue应用程序的入口文件中，通过Vue实例化时的router选项注册路由实例，使其生效。

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

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

在上面的代码中，我们通过router选项将路由实例注册到Vue实例中。

使用和组件：在Vue组件中，使用组件创建链接，使用户可以点击跳转到不同的路径。使用组件作为路由的占位符，用于展示匹配到的组件。

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

在上面的代码中，我们使用组件创建了两个链接，分别对应着Home和About路径，然后使用组件作为路由的占位符，用于展示匹配到的组件。

路由导航：可以通过编程方式进行路由导航，例如使用this.$router.push()方法进行跳转，或使用组件的to属性绑定动态路径。

// 编程方式导航
methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

// 动态路径
<router-link :to="'/user/' + userId">User</router-link>

在上面的代码中，我们可以通过编程方式使用this.$router.push()方法进行路由跳转，或者使用动态路径绑定组件的to属性。

路由守卫是一些回调函数，用于在路由导航过程中执行特定的逻辑。Vue Router提供了多个路由守卫，包括全局守卫、路由独享守卫和组件内的守卫。

以下是一些常用的路由守卫：

1. 全局前置守卫（beforeEach）：在每个路由导航之前被调用，常用于进行身份验证或权限控制。

router.beforeEach((to, from, next) => {
  // 在这里执行身份验证逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

2. 路由独享守卫（beforeEnter）：在某个路由配置中独立定义的守卫，仅对该路由生效。

{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 检查是否有管理员权限
    if (isAdmin) {
      next();
    } else {
      next('/login');
    }
  }
}

3. 组件内守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）：在组件内定义的守卫，用于在组件内部进行路由相关的操作。

{
  path: '/profile',
  component: Profile,
  beforeRouteEnter(to, from, next) {
    // 在进入路由之前执行一些逻辑
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在路由参数发生变化时执行一些逻辑
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开路由之前执行一些逻辑
    next();
  }
}

路由传参

1. 路由参数（Route Parameters）：你可以在路由配置中使用动态路径参数，以冒号（:）开头。这些参数将会被解析，并作为路由的参数传递给目标组件。

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

在上述的示例中，路由路径为/user/:id，其中:id是动态的路由参数，当访问/user/1时，1将作为参数传递给User组件。

2. 查询参数（Query Parameters）：你可以在路由导航中通过to属性的query选项传递查询参数。这些参数将会作为查询字符串的形式添加到目标URL中。

this.$router.push({
  path: '/search',
  query: { keyword: 'vue', page: 1 }
});

在上述的示例中，我们使用this.$router.push()方法导航到/search路径，并传递了查询参数keyword和page。

目标组件可以通过$route对象来访问路由参数和查询参数。

export default {
  mounted() {
    console.log(this.$route.params.id); // 访问路由参数
    console.log(this.$route.query.keyword); // 访问查询参数
  }
}

在上述的示例中，我们在目标组件中通过this.$route.params.id访问了路由参数id，通过this.$route.query.keyword访问了查询参数keyword。

通过路由传参，你可以在不同的路由之间传递数据，实现更加灵活和动态的页面导航和组件通信。