三十五、vue-router路由

一、路由概念

1.1 路由是一个网络工程中的术语，路由（routing）就是通过互联的网络把信息从源地址传递到目的地址的活动

1.2 路由器提供了两种机制：路由和传递

• 路由是决定数据包从来源到目的地的路径
• 转送将输入端的数据转移到合适的输出端

1.3 路由表本质上就是一个映射表，决定了数据包的指南

1.4 后端路由（第一阶段）：后端处理URL和页面之间的映射关系

1.5 前后端分离阶段（第二阶段）：

• 后端只负责提供数据，不负责任何阶段的内容；
• 前端渲染，浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

1.6 单页面富应用阶段（第三阶段）：

• SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
• 也就是前端来维护一套路由规则

1.7 前端路由的核心：改变url，但是页面不进行整体的刷新

二、vue-router 基本使用（官网：https://router.vuejs.org/zh/）

2.1 vue-router适用于构建单页面应用，并且是基于路由和组件的

• 路由用于设定访问路径，将路径和组件映射起来
• 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

2.2 通过工程化方式进行开发

步骤一：安装vue-router

npm install vue-router -save

步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）

• 第一步：导入路由对象，并且调用Vue.use(VueRouter)
• 第二步：创建路由实例，并且传入路由映射配置
• 第三步：在Vue实例中挂载创建的路由实例　　

////////////在router的index.js中
//配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

//2.创建路由对象
const routes = [

]
const router = new VueRouter({
  //在routes中配置组件之间的映射关系
  routes: routes,
  //默认情况下，路径的改变使用的URL的hash。下面则是使用 HTML5的history模式
  mode: 'history'
})

//3.将router对象传入vue实例中
export default router


////////////在main.js中

import Vue from 'vue'
import App from './App'
import router from './router/index.js' //index可以省略
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router:router,  //直接可以简写成router
  render: h => h(App)
})

2.3 使用vue-router的步骤

• 第一步：创建路由组件
• 第二步：配置路由映射：组件和路径映射关系
• 第三步：使用路由：通过和　　

//配置路由映射
import Home from '../components/Home'
import About from '../components/About'
//2.创建路由对象
const routes = [
  {
　　path: '',
　　//设置默认打开的url路径
　　redirect: '/home'
　},{
    path: '/home',
    component: Home
  },{
    path: '/about',
    component: About
  }
]

//使用路由 在App.vue中使用路由

    
    首页
    关于

    
    

• ：该标签是一个vue-router中已经内置的组件，它会被渲染成一个标签
• ：该标签会根据当前的路径，动态渲染出不同的组件
• 网页的其他内容，比如底部的标题、导航。或者底部的一些版权信息会和处于同一级
• 在路由切换时，切换的是挂载的组件，其他的内容不会发生改变
• 效果图如下