Vue学习笔记-Router

一、路由的基本使用

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

1.使用步骤:

  • 定义路由组件
    Vue学习笔记-Router_第1张图片
  • 注册路由
    在index.js文件中引入路由组件,并创建路由器。
    Vue学习笔记-Router_第2张图片
    Vue学习笔记-Router_第3张图片
    在main.js文件中注册路由器。
    Vue学习笔记-Router_第4张图片
  • 使用路由
<router-link to="/foo">Go to Foo</router-link>
<router-view></router-view>

Vue学习笔记-Router_第5张图片

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.使用方法

Vue学习笔记-Router_第6张图片

三、嵌套路由

1.为什么使用?

实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
Vue学习笔记-Router_第7张图片使用嵌套路由配置,就可以很简单地表达这种关系。

2.使用方法

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

  • 定义路由组件
  • 引入并注册路由组件
    Vue学习笔记-Router_第8张图片
  • 使用路由组件
    Vue学习笔记-Router_第9张图片
  • 页面效果
    Vue学习笔记-Router_第10张图片

四、路由组件传参

传参的方式有两种:
1.使用$route:
Vue学习笔记-Router_第11张图片
Vue学习笔记-Router_第12张图片
2.使用props(布尔模式、对象模式、函数模式):
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用 props 将组件和路由解耦:
Vue学习笔记-Router_第13张图片
如果 props 被设置为 true,route.params 将会被设置为组件属性。
Vue学习笔记-Router_第14张图片
取值:
Vue学习笔记-Router_第15张图片

五、编程式导航

1.页面导航的两种方式

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

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

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

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

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

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

定义函数
Vue学习笔记-Router_第16张图片
实现函数
Vue学习笔记-Router_第17张图片
页面效果
Vue学习笔记-Router_第18张图片

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() 注册过的回调。

你可能感兴趣的:(前端-Vue,vue.js,javascript,es6)