vue.js 路由进阶

1. 路由模块封装

在 Vue.js 项目中，封装路由模块有助于提高代码的可维护性和可扩展性，同时使路由配置更加清晰。下面是一个简单的路由模块封装示例：

// router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 导入页面组件
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import ProductList from '../views/Product/ProductList.vue';
import ProductDetail from '../views/Product/ProductDetail.vue';

// 定义路由
const routes = [
  {
    path: '/', component: Home },
  {
    path: '/about', component: About },
  {
    path: '/products', component: ProductList },
  {
    path: '/products/:id', component: ProductDetail },
];

// 创建路由实例
const router = new VueRouter({
   
  mode: 'history', // 可选的路由模式，可以是 'hash' 或 'history'
  routes, // 路由配置
});

export default router;

在这个示例中，我们将路由的配置放在了一个单独的文件中，并且将路由模式设置为了 history 模式。接着，在各个页面组件中，可以通过 <router-link> 和 <router-view> 来使用路由功能。

<!-- App.vue -->

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

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

<script>
export default {
     
  name: 'App',
};
</script>

<style>
/* 样式 */
</style>

在 main.js 中，我们导入了路由模块，并将其挂载到 Vue 实例上：

// 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');

这样，我们就成功地将路由模块封装起来，使得代码结构更加清晰，同时也方便了路由的管理和维护。

2. 声明式导航

声明式导航是指使用 Vue Router 提供的 组件进行导航，而不是直接使用 <a> 标签。通过 <router-link> 组件，你可以轻松地在 Vue.js 应用中实现页面之间的跳转，并且可以享受到 Vue Router 提供的诸多便利功能。

下面是一个简单的示例，演示如何在 Vue.js 中使用声明式导航：

<template>
  <div>
    <!-- 使用 router-link 组件进行声明式导航 -->
    <router-link to