一、路由的基本使用
说明:一般情况下路由组件存放在‘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() 注册过的回调。