vue-cli如何设置路由

Vue CLI 设置路由的方法主要有 1、安装 Vue Router、2、配置路由、3、使用路由组件。 首先需要安装 Vue Router，然后在项目中进行配置，最后在组件中使用路由。以下是详细的步骤和解释。

一、安装 Vue Router

在使用 Vue CLI 创建项目后，你需要安装 Vue Router，这是一个官方提供的路由管理器。你可以通过以下命令来安装：

npm install vue-router

或者，如果你使用的是 yarn：

yarn add vue-router

安装完成后，在你的项目中就可以使用 Vue Router 了。

二、配置路由

安装完成后，你需要在项目中配置路由。通常这是在 src 文件夹下的 router 文件夹中完成的。你可以按照以下步骤进行配置：

创建一个 router 文件夹（如果还没有）。
在 router 文件夹中创建一个 index.js 文件。
在 index.js 文件中进行路由配置。

以下是一个示例配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});
export default router;

在这个配置中，我们导入了 Vue 和 VueRouter，并且使用了 Vue.use(VueRouter) 来安装路由插件。然后，我们定义了一些基本的路由配置，并导出了一个新的 VueRouter 实例。

三、在 Vue 实例中使用路由

在完成路由配置后，你需要在 Vue 实例中使用这个路由。在 src/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');

这样就完成了路由的基本配置。接下来，你可以在组件中使用 router-link 和 router-view 来导航和显示不同的页面。

四、使用路由组件

router-link: 用于创建导航链接。它会渲染成一个 <a> 标签。

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

router-view: 用于显示匹配到的组件。

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

在上面的示例中，router-link 用于创建导航链接，router-view 用于显示匹配的组件。这样，当你点击链接时，对应的组件就会显示在 router-view 中。

五、动态路由和嵌套路由

除了基本的路由配置，你还可以配置动态路由和嵌套路由。

动态路由：可以通过在路径中使用冒号 : 来定义动态参数。

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

在组件中，你可以通过 this.$route.params 获取动态参数。

export default {
  mounted() {
    console.log(this.$route.params.id);
  }
};

嵌套路由：在父路由中定义子路由。

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

在父组件模板中使用 <router-view> 来显示子路由组件。

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

六、路由守卫

Vue Router 提供了导航守卫用于控制导航的过程。

全局守卫：可以在 router.beforeEach 中定义。

router.beforeEach((to, from, next) => {
  if (to.path === '/about') {
    next('/');
  } else {
    next();
  }
});

路由独享守卫：在路由配置中定义。

const routes = [
  {
    path: '/about',
    component: About,
    beforeEnter: (to, from, next) => {
      if (someCondition) {
        next('/');
      } else {
        next();
      }
    }
  }
];

组件内守卫：在组件的生命周期钩子中定义。

export default {
  beforeRouteEnter(to, from, next) {
    next();
  },
  beforeRouteUpdate(to, from, next) {
    next();
  },
  beforeRouteLeave(to, from, next) {
    next();
  }
};

七、总结与建议

通过以上几个步骤，你可以在 Vue CLI 项目中成功地设置路由。首先，安装 Vue Router；其次，配置路由；然后，在 Vue 实例中使用路由；最后，在组件中使用路由组件。 此外，你还可以配置动态路由、嵌套路由和路由守卫来增强应用的功能。建议你在实际项目中多多实践这些技巧，熟悉 Vue Router 的各种配置和用法，从而更好地构建单页面应用。