vue-router

1，router-link，router-view

router-link：声明式导航，属性：

• tag，渲染成什么标签，默认是a标签。
• to，目标地址，可以是路由名，可以携带参数。可以动态绑定描述目标位置的对象。
• active-class，选中时添加的类名
• replace，设置replace，点击会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。浏览器的历史记录有两种写入方式：分别为 push 和 raplace， push 是追加历史记录，replace是替换当前记录。路由跳转时候默认为 push 模式。

• exact，设置exact，开启严格模式，必须完全匹配to后的地址。

• append，设置 append 属性，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

router-view：初始页面App，显示组件。

2，hash模式，history模式

hash：

1. 原理：利用了浏览器的锚点机制，#号后面的值变化不会触发浏览器向服务器发送请求，而是通过window对象的hashchange事件来监听URL的变化，进而动态更新页面内容，实现单页面应用跳转。
2. 地址带#号。
3. 只能修改#号后面的内容。
4. 兼容IE8以上。

history：

1. 原理：使用HTML5的history API来实现，它通过改变浏览器的URL来实现前端路由。使用了pushState和replaceState这两个API来操作URL的状态，并且可以监听浏览器历史记录中的变化，从而实现前端路由的跳转。
2. 不带#号。
3. 参数地址栏中不可见。
4. 改变URL，刷新操作。需要在服务端做好设置，因为是向服务端发送请求。
5. 兼容IE10以上。

const router = new VueRouter({
  // 使用某些软件（微信）分享网址时会自动加减#，所以这种只能用 history 模式
  mode: 'history',
})

3，$router和$route

$router：vueRouter的一个实例对象，包含路由，方法。

$route：路由信息对象，包含路由信息。

• $route.path，绝对路径
• $route.params，使用params，path传递的参数
• $route.query，使用query传递的参数
• $route.name，路由名

4，路由传参query，params，router-link，path

query传参，可以用path和name，使用$router.query获取参数，参数地址栏可见，刷新不丢失

    // 路由query传参
    A(){
      this.$router.push({
        //使用query传递参数，可以使用name和path
        path:"/my-test",
        query:{
          id:this.id
        }
      })
    },


//获取参数
this.$router.query

params传参，只能使用name，用$router.params获取参数，参数地址栏不可见，参数刷新丢失

路由设为动态路由时，会把接收到的参数替换作为地址，参数可见，刷新不丢失

例如：

  {
    path: '/test/:id',
    name: 'mytest',
    component: test
  },

//使用params传递id参数，id会作为地址的一部分。
//地址栏为http://localhost:8080/test/123

    A() {
      this.$router.push({
        //使用params传递参数，只能使用命名式路由
        name:"mytest",
        params:{
          id:this.id
        }
      })
    }


//获取参数
this.$router.params

动态路由，使用path中传递参数，使用$router.params获取参数，参数可见，刷新不丢失

    A() {
      this.$router.push({
        path:`/test/${this.id}?`,
      })
    }


//获取参数
this.$router.params

router-link，to中传递参数

<router-link :to="{ name: 'home', params: { userId: userId } }"></router-link>


<router-link :to="{ path: '/home', query: { userId: userId } }"></router-link>

5，嵌套路由children:[ ]，动态路由path:'/home/:id'

     路由懒加载component: () => import('@/views/my-cinemas')

     路由重定向path:'*'

{
    path: '/my-films',
    component: films,
    //嵌套路由
    children: [
      {
        path: '/my-films/my-nowplaying',
        component: nowplaying
      },
    ]
},

 {
    name: 'cinemas',
    path: '/my-cinema/:id', // 动态二级路由
    component: cinema
  },

 {
    path: '/my-cinemas',
    name:cinemas,
    // 解决js文件过大，首屏加载过慢。
    // 使用箭头函数，实现懒加载，当组件要被渲染时 才下载下来
    component: () => import('@/views/my-cinemas')
  },

// 重定向路由放在最后优先级最低，当前面都没匹配上后，匹配重定向的 通配符*。
  {
    path: '*',
    redirect: '/my-films'
  }

6，路由守卫：全局守卫，路由独享守卫，组件守卫

• 全局前置守卫（路由切换前调用）

• 路由中添加meta信息

  {
    path: '/my-personal',
    component: ()=> import mypersonal from '@/view.my-personal.vue'
    meta: {
      isGuard: true
      title:'主页'
    }
  }

//路由配置文件index中
//to要去哪，from从哪里来，next放行
router.beforeEach((to, from, next) => {
  if (to.meta.isGuard) {
     //需要验证，进行条件判断，调用next()放行
       ......
  } else {
    //没有meta，不需要拦截直接放行
     next()
  }
})

• 独享路由守卫只有前置，没有后置

  {
    path: '/my-personal',
    component: ()=> import mypersonal from '@/view.my-personal.vue'
    meta: { isGuard: true }

    beforeEnter: (to, from, next) => {
       if (to.meta.isGuard) {
           //需要验证，进行条件判断，调用next()放行
           ......
      } else {
          //没有meta，不需要拦截直接放行
         next()
        }
   }

  }

• 组件路由守卫，写在vue文件中

//通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) {
  if (to.meta.isGuard) {
           //需要验证，进行条件判断，调用next()放行
           ......
  } else {
      //没有meta，不需要拦截直接放行
      next()
   }
}


 
//通过路由规则，离开该组件时被调用 
beforeRouteLeave(to,from,next) {
 next()
}