vue-路由

1:路由的两种模式

1-1: hash和history模式

 const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

1-2：hash和history区别

• hash带"#"，history不带“#”
• hash 能兼容到IE8， history 兼容到 IE10；
• hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。hash该变会触发hashchange事件,页面刷新无影响
• history 通过 pushState, replaceState两个方法,这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能，如果页面刷新会出现404，需要前后端配置

2: 路由传参

2-1: 路由分为params路由和query路由

动态路由params 比如 /path/:id
query路由 /path/?id=1这种

2-2: 路由传参

• params

 1: 声明式导航
  <router-link to={name:"order",params:{id:1}}></router-link>

  2: 编程式导航(跟声明式相似)
  this.$router.push({
   name: "order",
   params: {
      id:1,
      name: '"张三"
    }
  })

• query

 1: 声明式导航
  path路径
  字符串类型
  <router-link :to="{path:'/order?name=张三'}">Home</router-link>
  router-link :to="'/order?name=张三'">Home</router-link>
  对象类型
<router-link :to="{path:'/order',query:{name:'张三'}}">Home</router-link>
命名路由
<router-link :to="{path:'Order',query:{name:'张三'}}">Home</router-link>
2: 编程式导航(跟声明式相似)
this.$router.push({
  name: "Order",
  query: {
 
   }
})

params和query区别

 1：query 支持path路由和命名路由，params只支持name命名路由
 2：params可以做动态路由/path:id ,如果没有配置，页面刷新会丢失
 3：query类似于get,params类似于post
 

$router和$route区别

 1: router是路由实例，包括路由配置route,有自己的路由导航守卫，有自己的
 push go replece 方法实现页面的前进后退
 2: route是路由配置对象，由path params hash matched meta history等

路由导航守卫

• 1：全局前置守卫 beforeEach

 router.beforeEach((to,from,next) => {
  // 一般在这里边进行一些登录鉴权，和权限管理处理
})

• 全局解析守卫 beforeResolve这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
• 2：全局后置守卫 afterEach

 router.afterEach((to, from) => { // 没有自己的next函数
  // ...
})

• 3： 路由独享守卫 beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

• 4: 组件的路由导航守卫

  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用,可以进行一些保存的工作
    // 可以访问组件实例 `this`
  }

router-view 进行路由渲染

  <div>
       <router-view/>
  </div>

router-link 路由跳转

   to 表示跳转的path
   exact 精确路由
   tag 自定义标签 比如 tag="li"
   router-link :to="'/order?name=张三'">Home</router-link>
   

addRoute添加一条新路由规则

 添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它
  一般我们根据后端返回的权限字段，动态添加本地制定好的路由，就是使用
  this.$router.adddRoute() （里边是一个 数组）

嵌套路由(多级子路由)

 const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

重定向路由(redirect)

 const routes = [
   {
     path: '/index',
     redirect: '/detail'
   }
 ]

*路由（用于匹配不到展示的路由，比如404页面,放在routes路由配置对象的最下边）

 {
    path: '*',
    name: '404',
 }