vue-router项目实战总结篇

下面是“vue-router项目实战总结篇”的完整攻略。

安装vue-router

在项目中使用vue-router，需要先安装vue-router库。

# 使用NPM进行安装
npm install vue-router

# 使用Yarn进行安装
yarn add vue-router

配置vue-router

接下来，需要在Vue实例中配置vue-router。

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

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    /* 定义路由 */
  ]
});

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

以上代码中，我们首先将VueRouter注册成Vue插件，接着定义一个路由实例router，其中mode为路由模式，用来告诉Vue使用哪种路由模式，routes数组则用于定义路由规则。最后，在Vue实例中将router实例传递过去即可。

定义路由

在routes数组中定义路由规则，示例如下：

const router = new VueRouter({
  routes: [
    {
      path: '',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
});

以上代码中，我们定义了三个路由规则，分别是“/”、“/about”和“/contact”，每个规则都对应了一个组件。

路由传参

Vue-router还支持路由传参，示例如下：

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

以上代码中，我们定义了一个参数为:id的路由规则。在User组件中可以通过this.$route.params.id获取到url中的参数值。

示例说明一

我们来看一个具体的示例，假如我们需要使用vue-router实现显示文章列表和文章详情。

首先，我们需要定义路由规则。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: PostList
    },
    {
      path: '/post/:id',
      component: PostDetail
    }
  ]
});

以上代码中，我们定义了两个路由规则，分别对应了根路由“/”和文章详情路由“/post/:id”。

接着，我们需要在组件中完成对应的逻辑。

<template>
  <div class="post-list">
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="'/post/' + post.id">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, title: '文章1', content: '这是文章1的内容' },
        { id: 2, title: '文章2', content: '这是文章2的内容' },
        { id: 3, title: '文章3', content: '这是文章3的内容' }
      ]
    };
  }
};
</script>

以上代码实现了文章列表页的显示，每个文章都对应了一个router-link链接，点击链接会跳转到对应的文章详情页。

接下来，是文章详情页的组件代码。

<template>
  <div class="post-detail">
    <h2>{{ post.title }}</h2>
    <div>{{ post.content }}</div>
    <button @click="backToList">返回列表页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      post: {}
    };
  },
  created() {
    // 获取文章详情数据，并将数据赋值给post
    const postId = this.$route.params.id;
    this.post = this.getPostById(postId);
  },
  methods: {
    getPostById(id) {
      // 根据id获取文章详情数据
      const posts = [
        { id: 1, title: '文章1', content: '这是文章1的内容' },
        { id: 2, title: '文章2', content: '这是文章2的内容' },
        { id: 3, title: '文章3', content: '这是文章3的内容' }
      ];
      return posts.find(post => post.id === Number(id));
    },
    backToList() {
      this.$router.push('/');
    }
  }
};
</script>

以上代码实现了文章详情页的显示和返回文章列表页的逻辑。

示例说明二

我们还可以结合Vue生命周期钩子函数来实现更复杂的功能。比如在组件挂载前获取数据，可以使用beforeMount钩子函数。

<script>
export default {
  data() {
    return {
      posts: []
    };
  },
  beforeMount() {
    // 获取文章列表数据，并将数据赋值给posts
    this.posts = this.getPostListData();
  },
  methods: {
    getPostListData() {
      // 获取文章列表数据
      const posts = [
        { id: 1, title: '文章1' },
        { id: 2, title: '文章2' },
        { id: 3, title: '文章3' }
      ];
      return posts;
    }
  }
};
</script>

以上代码中，在组件挂载前会触发beforeMount钩子函数，我们可以在该函数中获取文章列表数据，并将数据存储在data中，以供组件中的模板使用。

另外，我们还可以结合activated钩子函数来实现缓存效果，比如缓存一些组件的状态，以减少重复渲染的性能开销。

以上就是“vue-router项目实战总结篇”的完整攻略，包含了安装vue-router、配置vue-router、定义路由、路由传参等内容，并提供了两个示例说明。