vue-router

1. VueRouter的两种模式

vue的路由实现：hash模式和history模式

hash模式：#以及#后面的字符就是hash内容，用window.location.hash读取，可以通过onhashchange监听hash改变。一般在开发中常用

• 特点：hash内容虽然在URL中，但是不被包括在Http请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式：不带#的地址。用window.location.pathname获取，history模式利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

• 特点：一般一刷新就404了。
  history模式URL就要和后端进行一致，所以要改为history也需要后端的配合，否则会报错。

hash模式在每次刷新页面时是只更改“#”后的东西，对后端完全没有影响。history每次刷新会重新向后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404。history的好处是可以进行修改历史记录。不过如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。

2. VueRouter在vue项目中的简单使用

• VueRouter中文文档

//*******在vue项目中使用VueRouter************
//1.安装VueRouter
npm install vue-router
//2. 引入VueRouter 
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
//3. 创建路由对象，定义路由规则(路由配置)
//例：
export default new VueRouter({
  routes:[
    {
      path:'/',
      name:'home',
      component:Home,
      //重定向
      redirect:'/index',
      //路由嵌套
      children:[
        {
          path: '/index',
          name: 'index',
          component: Index,
        }
      ],
      // 路由元信息，程序员可以填加任意自定义属性
      meta: {}
    },
    {
      path: '/login/:name',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: register
    }
  ]
});
//4. 将路由对象挂在到Vue实例中
import router from './router'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

//*************路由跳转******************
//要链接到一个命名路由：
//方法一： 可以给 router-link标签 的 to 属性传值
//例：
<router-link to="/login/小迟">登录</router-link>
//方法二：
//例：
this.$router.push("/register");

//路由匹配到的组件将显示到这里
<router-view></router-view>

//********路由获取参数***************
//只要将VueRouter实例对象挂在到Vue实例对象上，就可以通过this.$route拿到路由对象，只要能拿到路由对象，就可以通过路由对象拿到传递的参数
console.log(this.$route);

vue-router传参

• vue-router的传值方式：
  vue-router 传值 可以通过url传值
  url传值又有两种, params 和 query参数传值

  • params传值 是指的动态路由传值
    this.$route.params.name // 取值 专门获取路由规则中path: ‘/login/:name’,这种params参数

  • query传值 指通过?后面的拼接参数传值
    this.$route.query.id // 取值 获取 ?后面的参数 query参数 查询字符

  路由跳转携带参数：

  this.$router.push({ 
     path:'/xxx', 
     name: 'xxxPage', // 对映路由配置页面的组件name,使用params字段时必须使用该字段，否则取不出来
     query: { id: '123' },
     params: { name: '小迟' }
   })
  // 新页面参数获取：
  // this.$route.params.name  '小迟'
  // this.$route.query.id  '123'
  

3. 路由导航守卫

简单样例

const router =  new VueRouter({
  routes:[
    {
      path: '/register',
      name: 'register',
      component: register，
      beforeEnter: (to, from, next) => {
		// 单个路由独享的导航守卫
	  }
    }
  ]
})

router.beforeEach((to, from) => {
  // 全局导航守卫
})
...

// register组件
const register = {
  template: `...`,
  beforeRouteEnter(to, from) {
  	  // 组件内的导航守卫，通过路由规则
  },
  ...
}

参数解析：

1. to：目标路由对象；

2. from：即将要离开的路由对象；

3. next：

   next参数详解：

   1. next(): 进行管道中的下一个钩子函数。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
   2. next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
   3. next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
   4. next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

• 当在一个组件中点击切换路由时的执行顺序：beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>vue组件生命周期 beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next的回调

• 简单应用：使用全局前置守卫判断用户是否登录，如果没登陆跳转到登录页面，如果登陆了就可以跳转到目标界面