vue-router的routs和router区别和路由的模式

| this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。

| this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

vue路由跳转方式 ：编程式和声明式

声明式

　　简单来说，就是使用 router-link 组件来导航，通过传入 to 属性指定链接（router-link 默认会被渲染成一个a标签）。

　　当需要在一个页面中嵌套子路由，并且页面不跳转的时候，这种方式不要太好用啊哈哈哈... 只需要将子页面渲染在 router-view 里面就可以了。

编程式

采用这种方式就需要导入 VueRouter 并调用了。

vue-router 的使用步骤（以下采用编程式方式）：

1. 定义两个路由跳转的单 .vue 组件：home.vue 和 user.vue；

2. 导入 vue, vue-router，并定义路由，每个路由包含一个 component 属性，这个属性映射一个组件 --- router.js

import Vue from 'vue'
import Router from 'vue-router'

import Home from './home.vue'
import User from './user.vue'

Vue.use(Router);

3. 创建 router 实例，并传递 routes 配置 --- router.js

const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

const router = new Router({
    routes
})

4. 在 vue 根实例中注入路由，这样就可以在其他任何组件中访问路由了 --- main.js

import router from './router'

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

**1.$route.path**
      字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
**2.$route.params**
      一个 key/value 对象，包含了 动态片段 和 全匹配片段，
      如果没有路由参数，就是一个空对象。
**3.$route.query**
      一个 key/value 对象，表示 URL 查询参数。
      例如，对于路径 /foo?user=1，则有 $route.query.user == 1，
      如果没有查询参数，则是个空对象。
**4.$route.hash**
      当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
**5.$route.fullPath**
      完成解析后的 URL，包含查询参数和 hash 的完整路径。
**6.$route.matched**
      数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7.$route.name    当前路径名字**
**8.$route.meta  路由元信息

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
})
watch: {
  $route(to, from) {
     // to 和 from 都是 路由信息对象
  }
}

const router = new Router({
  routes: [
    {
      path: "/",
      name: "首页",
      redirect: '/home'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    { path: '*', component: NotFoundComponent }
  ],
  linkActiveClass: "active-router",
  linkExactActiveClass: "exact-router"
})

// 全局注册的路由
Vue.use(VueRouter)

// 字符串
      this.$router.push('home')
// 对象
      this.$router.push({ path: 'home' })
// 命名的路由
      this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123
      this.$router.push({ path: 'register', query: { plan: '123' }})

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

//push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录
<router-link to="/05" replace>05</router-link>

// 一般使用replace来做404页面
this.$router.replace('/')

路由模式解析
这里要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求也没有重新刷新页面，使用起来就好像页面是有状态的，这是什么原因呢。这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页面的状态就被维持在浏览器中了。
vue-router默认使用的是hash模式，也就是大家npm run dev启动项目url地址后面会一个很丑陋的#
看看咱们的路由配置是怎么写的
这就是vue-router默认的hash的写法，然后咱们现在改成另一种模式history模式，看代码。

添加一个mode : 'history’就可以改成history模式然后咱们重新启动项目跑一下看看URL地址上面的#是否还存在。
现在是没有那个丑陋的#了，这样看来咱们就知道怎么简便快速的区分当前路由是hash模式还是history模式了。

hash模式与history模式的区别

hash模式：

  hash原理其实是浏览器监听了一个onhashchange的方法来改变页面的跳转的
	      window.onhashchange = function(event){
		    console.log(event.oldURL, event.newURL);
		    let hash = location.hash.slice(1);
		    document.body.style.color = hash;
	     }
123456

使用Hash模式页面会给路由状态（调转页面的URL）记录下来前端开发者可以理解为就是使用浏览器缓存机制 ，存储了起来，然后咱们路由多的话点击以后会出现前进后退的提示当我们点击的时候发现，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来的。

缺点：只能改变#后面的参数来实现路由的跳转。
1

history模式：

　随着history api的到来，前端路由开始进化了，前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由。
1

history模式包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
1234

虽然history没有丑陋的#但也是有缺点的。

    缺点：不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了。
1

总结：

vue-router我给分为了2中模式：
1：hash模式（vue-router默认模式URL后面带#）使用URL的hash值来作为路由，支持所有浏览器    缺点：只能改变#后面的来实现路由跳转。
2：history模式（通过mode: 'history'来改变为history模式）HTML5 （BOM）History API 和服务器配置    缺点：怕刷新如果后端没有处理这个情况的时候前端刷新就是实实在在的请求服务器这样消耗的时间很多还很慢。
123