Vue Router的简单理解（包会）

前言

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，它能够让构建单页面应用变得易如反掌。（来自官方的一段话）

初识

这里面所涉及到的后面都会有解释，文章阅读完后一定要再次回到这里哦

1. 安装

   //1、使用cdn或者直接下载该连接的文件
   //https://unpkg.com/vue-router/dist/vue-router.js
   //注意：vue路由是基于vue的，在引入vue-router之前先引入vue.js
   <script src="/path/to/vue-router.js"></script>
   
   //2、使用node的npm进行安装
   //npm install vue-router
   

2. 配置路由
   这里使用的引入文件的方式
   首先因为每个路由都会对应一个视图，这个试图就是一个vue文件，每一个vue文件就是一个组件，所以在配置路由之前先来配置路由对应的组件。
   js代码

   //a、定义（路由）组件------------
   // 引用配置的模板，可以使用import来导入外部的组件（vue文件）
   const Login = { template: '<div>login</div>' };
   const Register = { template: '<div>register</div>' };
   
   //b、配置路由信息------------
   // 创建 router 实例，然后传 `routes` 配置
   let router = new VueRouter({
   	//这里的属性名 routes 是固定的
       routes:[{
           path:"/",
           redirect:"/login", //重定向到login上
           children:[{}] // 在此可进行嵌套路由
       },{
           // 每个路由应该映射一个组件。 其中"component" 的值可以是import导入过来的组件
           path:"/login",
           // 有匹配该路由则进行使用该组件
           component:Login
       },{
           path:"/register",
           component:Register // 引用上面的组件
       }]
   });
   //c、挂载路由------------
   // 创建vue实例
   new Vue({
       el:"#app",
       // 挂载此路由，，通过将配置好的路由对象 router 注入vue实例
       router //属性与上面的路由对象名字相同可简写
   });
   
   

   html代码

   <div id="app">
   	<!-- 用于跳转 -->
       <router-link to="/login">登录</router-link>
       <router-link to="/register">注册</router-link>
       <p>
       	<!-- 用于显示 -->
       	<router-view></router-view>
       </p>
   </div>
   

   理解图例：
   

涉及点

new VueRouter({}) 是利用VueRouter()构造函数，里面是一个对象用于配置路由信息，在这里用new关键字是实例化这个路由对象 。（必须在vue的环境下使用）
花括号里面的配置（这里只说常用的属性 routes 配置）：
routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象，值是数组对象的形式

属性名	值类型	释义
path	string	配置路径（当url上有对应的路径就会显示对应视图）
component	object	对应的视图即组件
name	string	命名此路由
redirect	string	用于重定向到某一路由上
children	Array< RouteConfig>	嵌套路由（值与routes的值一样）

new Vue({})是实例化vue对象，就是因为需要用到所以进行创建

< router-link> 内置组件，该组件支持用户在具有路由功能的应用中 (点击) 导航。通过属性 to 指定跳转的路由，默认被渲染成< a>标签，可通过tag属性进行更改渲染的元素，被选中的router-link将自动添加一个class属性值.router-link-active。

< router-view>内置组件，用于渲染路径匹配到的视图组件，就是相当于占位符，路由匹配到的组件将会显示在这里。

读前必懂

SPA(single page application)

单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。（简单理解就是 有一个框架，而这个框架里的内容是由用户的不同行为来改变，这个架子永远也不会改变），请观察用vue写的页面，外面只有一个id为app的元素，不会改变，这个其实就是单页面。

hash模式

其实用过ajax请求的小伙伴都知道他的快感，就是在不改变url的情况下，局部内容刷新，体验感很好。在vueRouter中就是用于跳转连接不进行刷新
下面这种带#号的就属于hash模式，它改变的是#号后面的内容

http://www.xxx.com/#/login

history 模式

在该模式下，首先他可以去掉hash模式中的#号，与普通的url相似。

http://www.xxx.com/login

前端的 URL 必须和实际向后端发起请求的 URL 一致，例如上面的url，如果后端缺少对 /login 的路由处理，将返回 404 错误。

如果有的小伙伴不太清楚，可以点我一下，记得回来哦！

动态路由匹配和嵌套路由的使用

动态路由匹配

这个也就是使用路由进行传递的参数
假设一个场景：当用户进行登录成功以后，在首页需要用到用户名，就可以使用动态路由的方式传递（我知道有很多方式）。
在vueRouter配置项中进行配置

let Index= {
  template: '<div>欢迎 {{ $route.params.username }}登录！</div>'
}

let router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    {
     path: '/index/:username', 
     component: Index
    }
  ]
})
上面代码看有点看不懂的小伙伴，请看下面的解析

动态路由写法是一个“路径参数”（/index/:username）使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

我们先来解释一下$route.params.username代码中的这个东西
“ $ ”在vue中是为了与用户定义的属性进行区分，所以在vue中会经常看到属性或方法都会以此作为前缀。

在vue中首先每一个组件都会是一个vueComponent对象，而这个对象里面有很多的方法和属性， $route就是其中之一。这个属性的值是个对象，这里面的params就是用来接受动态路由匹配到的值。

图例解析上面代码：

嵌套路由

嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。
官网上的示例

用代码解释

<div id="app">
  <!-- 1、首先此处router-view用于显示第一层匹配到的路由，也就是 http://localhost:3000/index 的显示此处 -->
  <router-view></router-view>
</div>

let Index= {
// 2、此处模板的内容上也有个router-view，当路径为http://localhost:3000/index/indexson 时进行匹配router中配置的子路由
  template: `
  <div clsss="index-page">
  	<router-link to="/index/indexson">子路由显示</a>
	<router-view></router-view>
  </div>`;
}
let IndexSon = {
	template:`
	<div class="index-son-page">
		这是嵌套路由匹配到的内容
	</div>
	`;
}

let router = new VueRouter({
  routes: [
    {
     path: '/index', 
     component: Index,
     //使用routes配置项的chldren属性配置子路由，
     //此属性children的配置项如同routes里的一样只不过时嵌套关系
     children:[{
     	{
		     path: 'indexson', 
		     component: IndexSon,
	     }
     },...],
    }
  ]
})

路由之间参数传递

get形式传参

get形式就是使用url进行传递参数，就是以url中问号“ ？”后面的方式。

如 http://localhost:3000/index?username=zhangsan

当有get方式传递的值可以使用组件对象（VueComponent）的内置 $ route中的属性query。在组件中可以直接使用this进行调用。使用方式：this.$route.query 获取问号后的参数，以对象形式呈现

举个例子
假如用户在进行登录时，首页需要登录的用户名，这里采用get形式传递

效果图如下：
请仔细阅读代码

<div id="app">
  <!-- 用于显示路由匹配到的组件 -->
  <router-view></router-view>
</div>

// 登录组件（页面）
let login = {
  template:`
  <div>
    <input type="text" v-model="username" placeholder="用户名"/>
    <!-- 默认为a标签进行点击跳转页面 -->
    <router-link :to="'/index?username='+username">登录</router-link>
  </div>`,
  data(){
    return{
      username:"",
    }
  },
}
// 首页组件（页面）
let index = {
  template:`
  <div>
    <h2>首页</h2>
    <!-- 在这里得到get形式传递的值 -->
    登录用户名是：{{$route.query.username}}
  </div>`,
}

// 配置路由
let router = new VueRouter({
  routes:[{
    path:"/login",
    component:login,
  },{
    path:"/index",
    component:index,
  }]
});

// vue实例
new Vue({
  el:"#app",
  router,
})

图例解析上面代码

动态路由传参

这个也就是上面说到过的动态路由匹配那个点可以在去回顾。
简单理解：使用组件对象的内置 $ route中的属性params如果路径存在“/login/10/张三”， 然后与路由中定义的path属性值“/login/:uid/:username”匹配会进行一一对应
使用方式：this.$route.params 以对象的方式获取

编程式的导航

简单来说就是不通过router-link组件的to属性也能实现视图之间的跳转，就是要借助vueRouter提供的实例方法，通过编写代码来实现。

注意：在 Vue 实例内部，你可以通过 $ router 访问路由实例，进行调用提供的方法。

1. router.push(location)
   该方法是通过传入的路径进行的切换视图，（这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。）
   该方法的参数可以是一个字符串路径，或者一个描述地址的对象，和点击< router-link :to="…">是一样的
   当执行到此方法是它就会根据你提供分路径进行在vueRouter中匹配，并显示对应的视图
   例：

   // 字符串
   this.$router.push('/home/first')
   // 对象
   this.$router.push({ path: '/home/first' })
   

2. router.replace(location)
   该方法跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 ——— 替换掉当前的 history 记录。

   // 字符串
   this.$router.replace('/home/first')
   // 对象
   this.$router.replace({ path: '/home/first' })
   

   例：
3. router.go(number)
   这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(number)。
   就相当于你点击了浏览器上的后退按钮的效果一样，只不过这个方法可以设置后退几步，而浏览器上面那个只能history里的顺序一步步后退
   例：

   // 在浏览器记录中前进一步，等同于 history.forward()
   router.go(1)
   // 后退一步记录，等同于 history.back()
   router.go(-1)
   // 前进 3 步记录
   router.go(3)
   

路由重定向

我们先模拟一个场景，最常见的就是当用户输入一串地址 比如‘http//localhost:8080’，然后vueRouter在匹配时只会匹配端口号后面的地址是否进行配置，此时地址后面没有什么，浏览器会在后面加上 ‘/’。这时候你想访问到指定视图并不指定文件名时，就可以使用重定向的方式（当然还有其他方式）

例：

//在vueRouter实例中进行配置
const router = new VueRouter({
  routes: [
    { 
	    path: '/', 
	    redirect: '/home', //重定向
    },
    {
    	//间接匹配到此路由
		path:'/home',
		component:homeComponent,
	}
  ]
})

在这里“重定向”的意思是，当用户访问 “http//localhost:8080”时，URL 将会被替换成 “http//localhost:8080/home”，然后匹配路由为 “/home”.

文章中可能还有许多细节没有提到，感兴趣的小伙伴可以到官方文档在过一遍

到这里就结束了，后续还会更新vue全家桶相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

↑↑↑上一篇：看完包会的Vuejs基础