Vue Router--- 路由导航

该版权归原做者全部，此处仅做交流学习。

参考网址：https://cn.vuejs.org/v2/guide/components-registration.html

 

Vue Router 是 Vue.js 官方的路由管理器。

它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的连接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

 

 

一、npm安装：

　　npm install vue-router

　　

 

二、实例

经过组合组件来组成应用程序，要把 Vue Router 添加进来，须要将组件 (components) 映射到路由 (routes)，而后告诉 Vue Router 在哪里渲染它们，基本实例：

 

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 经过传入 `to` 属性指定连接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> 

JavaScript

// 0. 若是使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义 (路由) 组件。 // 能够从其余文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定义路由 // 每一个路由应该映射一个组件。 其中"component" 能够是 // 经过 Vue.extend() 建立的组件构造器， // 或者，只是一个组件配置对象。
 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 建立 router 实例，而后传 `routes` 配置 // 你还能够传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写) 至关于 routes: routes }) // 4. 建立和挂载根实例。 // 记得要经过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app') // 如今，应用已经启动了！

 

三、动态路由匹配

例如，咱们有一个 User 组件，对于全部 ID 各不相同的用户，都要使用这个组件来渲染。

那么，咱们能够在 vue-router 的路由路径中，使用“动态路径参数” 来达到这个效果：

 

const User = { template: '<div>User {{ $route.params.id }}</div>'
} 

const router = new VueRouter({
 routes

四、嵌套路由

由多层嵌套的组件组成。

<div id="app"> <router-view></router-view> </div> 

const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })

 

这里的  是最顶层的出口，渲染最高级路由匹配到的组件。一样地，一个被渲染组件一样能够包含本身的嵌套 。

例如，在  组件的模板添加一个 

<router-view><router-view>User<router-view>

 

const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` }

要在嵌套的出口中渲染组件，须要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] })

五、全局守卫

能够使用 router.beforeEach 注册一个全局前置守卫：

全局后置守卫：const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })

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

• to: Route: 即将要进入的目标 路由对象（到哪里去）

• from: Route: 当前导航正要离开的路由 （从哪里来）

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

六、路由独享守卫

能够在路由配置上直接定义 beforeEnter 守卫：

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

七、组件内守卫

能够在路由组件内直接定义如下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate 
• beforeRouteLeave

 

实例：

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` } }