vue-route路由详解

路由分类

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

前端路由：value是component，用于展示页面内容 工作过程：当浏览器的路径改变时，对应的组件就会显示，前端路由指的是hash地址与组件之间的对应关系

vue-router路由模式

hash模式和history模式，默认的是hash模式

哈希模式

简介： hash 模式是开发中默认的模式，它的 URL 带着一个#，例如：http://www.abc.com/#/vue，它的 hash 值就是#/vue。

特点：hash指的是地址中#号以及后面的字符，也称为散列值；hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面；浏览器兼容好，是开发中默认的模式；hash变化对应的url都会被浏览器记录在历史访问栈中，可以使用浏览器的前进后退功能，虽然没有请求服务器，但页面内容和url一一对应；hash模式的工作原理是hashchange事件，window就可以监听hash的变化，而不需要向后端发起请求，并按规则加载相应的代码

历史模式

简介： history 模式的 URL 中没有#，它使用的是传统的路由分发模式，即用户在输入一个 URL 时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。

特点：书写简洁，没有#；主要使用了HTML5新增的pushState()和replaceState()这两个api结合window.popstate事件来实现的；pushState()可以改变url地址但不会发送请求；replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改；window.popstate只有用户点击浏览器前进和后退，或者使用js调用history.forward()、history.go()、history.back()方法时才会触发popstate事件，仅调用pushState()或replaceState()方法，不会触发该事件；前端的url必须和实际向后端发起请求的url 一致，如http://www.baidu.com/a/ 。如果后端缺少对/a 的路由处理，将返回404

要注意404的问题，因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址里的路径，并没有发起http请求，所以当直接在浏览器里输入这个地址的时候，就会对服务器发起请求，但是这个目标在服务器上又不存在，所以会返回404。所以要在Nginx中将所有请求都转发到index.html上

获取页面的hash变化

// 1、通过监听$route的变化实现
watch:{
  $route:{
    handle:function(val,oldVal){
      console.log(val)
    }
    // 深度监听
    deep:true
  }
}

// 2、通过window.location.hash读取#值

$route和$router的区别

$route
路由信息对象，包括path、params、hash、query、fullPath、matched,name等路由信息参数，以下为路由信息：

1.$route.name 当前路径名字

2.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。

3.$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。

4.$route.params 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路径参数，就是一个空对象。

5.$route.query 一个key/value对象，表示url查询参数

6.$route.hash 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。

7.$route.matched 数组，当前路由下路由声明的所有信息，从父路由(如果有)到当前路由为止

8.$route.meta 路由元信息，验证用户是否需要登陆、设置标题、是否显示某个组件、是否缓存组件等

**$router **
路由实例对象，包括了路由的跳转方法、钩子函数等

this.$router.push()固定写法

this.$router.replace()替换

this.$router.back()后退

this.$router.forward()前进

this.$router.go(数字)前进/后退几步

定义动态路由

1、params方式

配置路由格式：/router/:id

传递方式：在path后面跟上对应的值

传递后形成的路径:/router/1;

// 路由定义
用户
{
  path:'/user/:userId',
  component:User
}

// 路由跳转
// 方法一

// 方法二
this.$router.push({name:'users',params:{uname:wfz}})
// 方法三
this.$router.push('/user/'+wade)

// 参数获取
$route.params.push('/user/'+wade)

2、query方式

配置路由格式:/router

传递的方式：对象中使用query的key作为传递方式

传递后形成的路径：/route?id=123

// 路由定义
// 方式一：直接在router-link标签上以对象的形式

//方式二：写成按钮以点击事件形式
按钮
toUser(){
  this.$router.push({
    path:'/profile',
    query:{
      name:'wfz',
      age:'26'
    }
  })
}

// 跳转方法
// 方法一
跳转
//方法二
this.$router.push({name:'users',query:{uname:wfz}});
// 方法三
跳转
// 方法四
this.$router.push({path:'/user',query:{uname:wfz}})
// 方法五
this.$router.push('/user?uname='+wfz)

// 获取参数
$route.query
  

params和query的区别

query

1.拼接在url后面的参数。

2.参数在?后面，且参数之间用&符分隔

3.query相当于get请求，可以在地址栏看到参数

params

1.是路由的一部分。以对象的形式传递参数

2.params只能使用name传参跳转，如果写成path页面会显示警告，说参数会被忽略

3.params相当于post请求，参数不会在地址栏中显示

注意：query刷新不会丢失query里面的数据，params刷新会丢失params里面的数据

Vue-router导航守卫有哪些

全局前置钩子
beforeEach、beforeResolve、afterEach

router.beforeEach((to,form,next)=>{
  let userInfo=windom.localStorage.getItem('wfz');
  if(!userInfo){
    // 如果路径是登录页面路径，则直接next()
    if(to.path=='/login'){
      next();
    }else{
      // 否则跳转到登陆页面
      this.$router.push('/login')
    }
  }else{
    return next()
  }
})

// afterEach
router.afterEach((to,from)=>{
  // 跳转后滚动条回到顶部
  window.scrollTo(0,0)
})

路由独享的守卫

// 为某些路由单独配置守卫
export default[
  {
    path:'/',
    name:'login',
    component:login,
    beforeEnter:(to,from,next)=>{
      next()
    }
  }
]

组件内的守卫

beforeRouteEnter：进入组件前触发（在该组件还访问不到this，因为该守卫前组件实例还没有被创建）

beforeRouteUpdate：当前地址改变并且该组件被复用时触发，如：带有动态参数的路径car/:id,在car/1和car/2之间跳转的时候，由于会渲染同样的car组件，这个钩子在这种情况下就会被调用

beforeRouteLeave：离开组件被调用