vue2中的配置代理和路由的使用

1.配置代理

在Vue.js 2中配置代理主要是为了解决开发环境下的跨域问题，通常用于前后端分离开发中。Vue.js本身并不提供代理功能，但是可以通过webpack-dev-server或者Vue CLI提供的配置进行代理设置。

下面是在Vue.js 2中配置代理的一般步骤：

安装依赖：
如果你使用的是Vue CLI，通常不需要额外安装依赖，因为Vue CLI已经集成了webpack-dev-server。如果你是手动配置webpack，需要安装http-proxy-middleware依赖。

创建代理配置文件：
在Vue CLI中，你可以在项目根目录下的vue.config.js文件中配置代理。如果你是手动配置webpack，可以在webpack配置文件中进行代理设置。

配置代理：
在vue.config.js文件中，你可以通过devServer.proxy选项配置代理。示例代码如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端API服务器地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 路径重写
        }
      }
    }
  }
}

上述代码的意思是，当请求路径以/api开头时，会被代理到http://localhost:3000地址，例如/api/user会被代理到http://localhost:3000/user。

重启开发服务器：
如果你使用的是Vue CLI，只需重启开发服务器即可生效；如果是手动配置webpack，需要重新构建项目。

配置完代理后，你可以在开发环境中使用相对路径来请求后端API，而无需担心跨域问题。不过需要注意，代理只在开发环境下生效，在生产环境中仍需后端配置跨域规则。

2.路由的使用

Vue.js 2中的路由是通过Vue Router实现的，它允许你在单页面应用（SPA）中管理应用的路由，实现页面之间的切换和导航。下面是关于Vue.js 2中路由的一些基本概念和用法：

安装和配置：
首先，你需要通过npm或者yarn安装Vue Router包。然后，在Vue应用的入口文件（通常是main.js）中导入Vue Router并将其挂载到Vue实例上。

定义路由：
你需要定义应用中的路由。路由通常是一个对象数组，每个对象表示一个路由，包含路径和对应的组件。例如：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;
创建路由器实例：
使用定义好的路由数组创建一个VueRouter实例，并传入选项对象。选项对象中可以包含路由的模式（如hash或history）等配置。

挂载路由器：
将路由器实例挂载到Vue实例上，这样Vue实例就可以使用路由功能了。

路由视图：
在Vue组件中，通过标签来显示当前路由对应的组件。

导航链接：
使用组件来创建导航链接，它会自动渲染成标签，点击时会切换到对应的路由。例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

动态路由：
你可以定义带有动态参数的路由，例如：

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

在组件内部可以通过$route.params.id访问动态参数。

嵌套路由：
你可以嵌套路由，让子路由的组件在父路由的组件中渲染。例如：

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