vue 路由

[Narutocc]

vue路由

• $route可以获取当前router跳转对象中的name、path、query、params等；
• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法。
• 返回上一个history也是使用$router.go方法。

  $route.path
  $route.params
  $route.query
  $route.hash
  $route.matched // 路由记录
  $route.name
  $route.fullPath // 包含查询参数和hash完整路径
  route.go(num)

  vue-router2.0导航钩子：

  vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。 vue里面提供了三大类钩子：

  1. 全局钩子
  2. 单个路由独享钩子
  3. 路由组件钩子（直接定义在router中component处的组件）。

全局钩子：

// 全局钩子
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {

})

某个路由独享钩子：

// 某个路由独享钩子
// 给某个路由单独使用，本质上和后面的组件内钩子是一样的，都是特指的某个路由，不同的是，这里一般定义在router当中，而不是在组件内。如下：
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})

路由组件内钩子：

// 路由组件内钩子

beforeRouteEnter (to, from, next) {
  // ...
  next()
},
beforeRouteUpdate (to, from, next) {
  // ...
  next()
},
beforeRouteLeave (to, from, next) {
  // ...
  next()
},
computed: {},
methods: {}

• to: Route: 即将要进入的目标路由对象

• from:Route: 当前导航正要离开的路由

• next:Function: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数

• next(): 进行管道中的下一个钩子，如果全部钩子执行完了，则导航的状态就是confirmed（确认的）。

• next(false): 中断当前的导航，如果浏览器的URL改变了（可能是用户手动或者浏览器后退按钮），那么URL地址会重置到from路由对应的地址。

• next('/') 或者 next({path: '/'})：跳转到一个不同的地址，当前的导航被中断，然后进行一个新的导航。

  跳转路由的几种情况

  1. 使用映射路由

  只需要跳转页面，不需要添加验证方法的情况，可以使用来实现导航的功能。如下：

  <router-link :to={path: '/home/list', query:{id: 1}}>demo</router-link>

• 可以通过 this.$route.query.id 来获取id的值

• 如果是在路由配置的path: '/home/:id'，则可以通过 this.$route.params.id 来获取id的值

2. 编程式导航

很多按钮在执行跳转之前，还会执行一系列的方法，这时可以使用 this.$router.push(location)来修改url，完成跳转

<button @click="goFirst">登录</button>

methods: {
  goFirst () {
    this.$router.push({path: '/home/first', query: {id: '1'}})
  }
}

或者直接简写

<button @click="$router.push({path: '/home/first', query: {id: '1'}})">登录</button>