vue之路由-EW帮帮网

路由基础

与A标签相似
.router-link-active 当对应的路由匹配成功，将自动设置 class 属性值

动态路由匹配

用：id 匹配
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
$$route.query匹配？后的值

匹配优先级

匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高
嵌套路由
在创建一个字节点
注意：定义子节点时父节点中添加

命名路由与命名视图
都是用name：来命名
命名路由后引用应用

<router-link :to="{ name: 'user',  }}">User</router-link>

命名视图

为了能引用专门的路由

<router-vi
ew class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
<script>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

</script>

编程式的导航

router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
router.replace(location)它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
定向 (redirect)和别名(alias)
导航钩子
全局钩子

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

router.js 的配置

首先引入 vue-router组件，Vue.use是用来加载全局组件的。那下面我们就开始看看这个VueRouter的写法和配置吧。
mode:
默认为hash，但是用hash模式的话，页面地址会变成被加个#号比较难看了， http://localhost:8080/#/linkParams/xuxiao
所以一般我们会采用 history模式，它会使得我们的地址像平常一样。http://localhost:8080/linkParams/xuxiao
base
应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”。
一般写成 __dirname，在webpack中有配置。

routes

routes就是我们的大核心了，里面包含我们所有的页面配置。
path 很简单，就是我们的访问这个页面的路径
name 给这个页面路径定义一个名字，当在页面进行跳转的时候也可以用名字跳转，要唯一哟
component 组件，就是咱们在最上面引入的 import …了，当然这个组件的写法还有一种懒加载

懒加载的方式，我们就不需要再用import去引入组件了，直接如下即可。懒加载的好处是当你访问到这个页面的时候才会去加载相关资源，这样的话能提高页面的访问速度。
component: resolve => require([‘./page/linkParamsQuestion.vue’], resolve)

router传参数

在我们的平时开发跳转里，很明显，传参数是必要的。那么在vue-router中如何跳转，如何传参数呢。请看下面。

1.路由匹配参数
首先在路由配置文件router.js中做好配置。标红出就是对 /linkParams/的路径做拦截，这种类型的链接后面的内容会被vue-router映射成name参数。
2.Get请求传参
这个明明实在不好形容啊。不过真的是和Get请求一样。你完全可以在链接后加上?进行传参。
样例：http://localhost:8080/linkParamsQuestion?age=18

路由独享钩子函数

可以做一些单个路由的跳转拦截。在配置文件编写代码即可

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

组件内钩子函数

更细粒度的路由拦截，只针对一个进入某一个组件的拦截。

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

钩子函数使用场景

其实路由钩子函数在项目开发中用的并不是非常多，一般用于登录态的校验，没有登录跳转到登录页；权限的校验等等。

滚动行为

在利用vue-router去做跳转的时候，到了新页面如果对页面的滚动条位置有要求的话，可以利用下面这个方法。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。
第三个参数 savedPosition 当且仅当 popstate 导航 (mode为 history 通过浏览器的前进/后退按钮触发) 时才可用。

//所有路由新页面滚动到顶部：
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

//如果有锚点
scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

路由元信息

这个概念非常简单，就是在路由配置里有个属性叫 meta，它的数据结构是一个对象。你可以放一些key-value进去，方便在钩子函数执行的时候用。
举个例子，你要配置哪几个页面需要登录的时候，你可以在meta中加入一个 requiresAuth标志位。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { requiresAuth: true }
    }
  ]
})

然后在全局钩子函数 beforeEach中去校验目标页面是否需要登录。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //校验这个目标页面是否需要登录
    if (!auth.loggedIn()) {  
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

这个auth.loggedIn 方法是外部引入的，你可以先写好一个校验是否登录的方法，再import进 router.js中去判断。

本文含有隐藏内容，请开通VIP 后查看

vue之路由