前言：
相关认识：
-
后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务
-
前端路由:不同的网址对应各自的页面
vue的前端路由:SPA 应用要做出路由效果,就得判断当前网址,然后切换组件。（vue-router 就是专门做切换组件的功能,它是一个单独的技术,依赖vue，就像jQuery和dom操作一样）
配置路由
一、创建vue项目、引入路由
方法一：创建了vue文件，CDN引入，在网站上搜一下
方法二：创建了vue文件，然后npm 下载引入router使用
//创建vue项目
vue create 项目名
//安装到项目中:
npm i vue-router --save-dev//注意:这种下载不好,因为打包之后容易出问题
npm i vue-router --save或者 npm i vue-router --S
在main.js入口文件中引入
import Vue from "vue"
import VueRouter from "vue-router"//引入路由工具
import App from "./App.vue"
Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router
//创建路由工具
const router=new VueRouter({
//routes路由器 生成很多网址对应的切换组件
routes:[{path:"/home",component:()=>import("./home.vue")},
{path:"/about",component:()=>import("./about.vue")}]
})
new Vue({
router,//把路由挂载到页面
render(h){return h(App)}
}).$mount("#app")
//在App.vue中写 <router-view></router-view>
方法三：在创建vue项目的时候就选择下载路由插件router
vue create 项目名
空格键选择router，然后回车。
项目就会帮我们引入路由
二、网络请求（代理服务配置proxy）
在vue.config.js文件中配置：
//配置开发环境参数
devServer：{
//本地服务器监听的端口
port：端口号
//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
proxy: {
'/api': 'http://localhost:7001',
},
// proxy: {
// '/api': {
// target: 'http://localhost:7001',
// secure:true,//如果代理的target是https接口,需要配置它
// pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
// },
// },
}
}
使用路由，要先了解：
-
view文件是用来写切换的组件
-
router文件是配置路由的文件，创建vue项目时，系统帮我们已经配置好了的。
-
要使用切换组件在根组件中使用
<router-view></router-view>代表路由网址匹配到的组件 ，会渲染到当前组件的这个标签上
基础配置实例
main.js文件:
import Vue from 'vue'
import App from './App.vue'
// 引入路由：主要功能：配置路由的规则（路由模式，注册的路由地址-网址，组件原型链中绑定路由对选哪个和路由信息）
import router from './router'
Vue.config.productionTip = false
new Vue({
// 挂载路由到整个项目中：主要功能就是监听地址栏的改变，
// 然后修改项目中的router-view组件应该加载的组件
router,
render: h => h(App)
}).$mount('#app')
