Vue.js组件开发-路由与视图切换

在Vue.js中，路由与视图切换是通过Vue Router来实现。Vue Router提供了声明式的路由配置、嵌套路由、动态路由匹配、路由参数、路由守卫等功能。

基本概念

‌路由‌：定义URL路径和组件之间的映射关系。
‌视图‌：与特定路由相关联的组件，当用户访问某个路由时，对应的视图组件会被渲染到页面上。

使用步骤

‌1、安装Vue Router‌：

如果还没有安装Vue Router，可以通过npm或yarn来安装。

npm install vue-router@4

或者

yarn add vue-router@4

‌2、创建路由实例‌：

定义一个路由实例，并配置路由规则。这些规则指定了URL路径和组件之间的映射关系。

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

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

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3、在Vue应用中使用路由‌：

将路由实例注入到Vue应用中。

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

const app = createApp(App);
app.use(router);
app.mount('#app');

4、在组件中使用路由‌：

使用<router-link>组件来实现导航，<router-view>组件来展示当前路由对应的视图。

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

高级功能

‌路由守卫‌：

可以在路由切换前或切换后进行一些操作，如权限验证、页面跳转等。

router.beforeEach((to, from, next) => {
  // 权限验证逻辑
  if (to.meta.requiresAuth && !isUserLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

‌嵌套路由‌：

可以在路由配置中定义嵌套路由，使得子路径自动继承父路由的配置。

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];

动态路由匹配‌：

对于动态路径参数，可以在路由配置中使用冒号:来定义。

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

编程式导航‌：

除了使用<router-link>组件进行声明式导航外，还可以使用Vue Router提供的编程式导航API来动态控制路由。

this.$router.push({ name: 'user', params: { id: 123 } });