vue-router的使用方法及含参数的配置方法

准备工作：
使用vue-cli创建一个vue项目，安装vue-router。安装命令： npm install vue-router --save。

一、常规路由的使用方法

1. 在router目录下创建router.js文件

该文件主要配置路由相关信息，导出一个Router实例。

代码如下：

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

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/views/About.vue'),
    },
  ],
});

2. 在main.js中引入router.js，并注入到Vue实例中

代码如下：

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

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

3. 在组件中通过标签或者编程式导航跳转路由

通过标签跳转路由：

<router-link :to="{ path: '/' }">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>

通过编程式导航跳转路由：

this.$router.push('/');
this.$router.push({ path: '/' });
this.$router.push({ name: 'about' });

二、含参数的路由

1. 路由中动态设置参数

对于含参数的路由，需要在router.js中配置路由规则，通过路由动态设置参数。示例代码如下：

export default new Router({
  ...
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: () => import('@/views/User.vue'),
    },
  ],
  ...
});

2. 组件中获取参数

在组件中通过$router.params获取参数值。示例代码如下：

<template>
  <div>
    <h1>User</h1>
    <p>userId: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      userId: '',
    };
  },
  mounted() {
    this.userId = this.$route.params.id;
  },
};
</script>

以上就是Vue-router的使用方法及含参数的配置方法的攻略。