Vue学习笔记-Router

一、路由的基本使用

说明：一般情况下路由组件存放在‘views/pages’目录，非路由组件存放在‘components’目录

1.使用步骤：

• 定义路由组件
  
• 注册路由
  在index.js文件中引入路由组件，并创建路由器。
  
  
  在main.js文件中注册路由器。
  
• 使用路由

<router-link to="/foo">Go to Foo</router-link>
<router-view></router-view>

2.相关API

VueRouter(): 用于创建路由器的构建函数

new VueRouter({
// 多个配置项
})
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/foo',
      component: Foo
    },{
      path: '/bar',
      component: Bar
    }
  ]
})

路由配置

routes: [
{ // 一般路由
path: '/about',
component: About
},
{ // 自动跳转路由
path: '/',
redirect: '/about'
}
]

注册路由器

import router from './router'
new Vue({
router
})

二、路由的重定向

1.为什么要使用重定向路由？

开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。

2.使用方法

三、嵌套路由

1.为什么使用？

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
使用嵌套路由配置，就可以很简单地表达这种关系。

2.使用方法

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以嵌套多层路由。

• 定义路由组件
• 引入并注册路由组件
  
• 使用路由组件
  
• 页面效果
  

四、路由组件传参

传参的方式有两种:
1.使用$route：


2.使用props（布尔模式、对象模式、函数模式）：
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦：

如果 props 被设置为 true，route.params 将会被设置为组件属性。

取值：

五、编程式导航

1.页面导航的两种方式

• 声明式导航：通过点击链接实现导航的方式
  例如：普通网页中的链接或vue中的

• 编程式导航：通过调用JavaScript形式的API来实现导航的方式，叫做编程式导航
  例如：普通网页的location.href

2.编程式导航的基本用法

常用的编程式导航API如下：

1.this.$router.push('路径')
2.this.$router.go(n)

3.this.$router.push(‘路径’)

定义函数

实现函数

页面效果

this.$router.go(n)

‘参数’是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

定义函数

实现函数

六、全局前置守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。使用router.beforeEach注册一个全局前置守卫，每当通过vue-router跳转都会先执行这里，相当于过滤器。

1.beforeEach的三个参数

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

2.next函数

• next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
• next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
• next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
• next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。