vue 基本路由

---

一、什么是路由

用现实生活中的路由器解释，每个路由器都有单个或多个路由接口，
可以将接口认为key，连接的对象为value
通过接口访问/调用 连接的对象

可以理解为路由是一个中转站，将要使用的组件或函数整合调用

后端路由

1. 理解：value是function，用于处理客户端提交的请求
2. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由

1. 理解：value是component，用于展示页面内容
2. 工作过程：当浏览器的路径改变时，对应的组件就会显示

页面一般路径改变，但不进行跳转

二、基本路由

1. 安装vue-router，命令npm i vue-router （vue2需要安装@3版本）
2. 导入vue-router，进行注册vue.use(router)
3. 导入要使用的组件，router实例配置项

main.js文件

import Vue from 'vue'
import App from './App.vue'
import vueRouter from 'vue-router'	// 引入VueRouter
import router from './router'		// 引入路由器（./router/index.js文件）

Vue.config.productionTip = false

Vue.use(vueRouter)	// 进行注册

new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

创建scr/router/index.js 文件

import vueRouter from 'vue-router'				// 引入VueRouter
import Login from '../pages/Login'	// 路由组件
import Home from '../pages/Home'		// 路由组件

// 创建router实例对象，指定路由规则
const router = new vueRouter({
	routes:[
		{
			//访问的路径
			path:'/login',
			//路由组件
			component:Login
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router

在使用路由时要通过 < router-view >< /router-view >标签
进行指定路由出现的位置

希望在页面上切换路由组件时，可以使用
< router-link to=“/home”>< /router-link>标签进行路由改变

注意点

1.为了方便管理， 一般路由组件放在pages或views文件夹

2.每个路由组件都有$ route属性和$ router
$route的值一般是组件自身的数据
$router是所有路由组件共同有的，里面有所有路由组件的数据