[JavaScript知识库]Vue笔记（五）：路由基础

路由用于组件间的跳转

首先定义组件：

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

这是我们现在实例用的组件，实际项目中一个组件可能就是一整个页面

接下来我们创建一个路由对象

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 创建路由对象
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes，es6的新语法
})

路由对象创建完成后 我们在Vue对象中使用路由器

const app = new Vue({
  router
}).$mount('#app')

在模板中 我们使用router-link来导航

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

在实际项目中，一般会使用嵌套的router组件来渲染，并且路由的地址是动态组装的，上面的示例是比较简单的超链

接的形式

在路由中若传输了参数 可以在跳转后的Vue组件中通过this.$route.params.参数名获取

除此之外 在js中也可以进行路由跳转

// 当前路由的view跳转到 /home
router.push('home')

// 对象,  跳转到/home
router.push({ path: 'home' })

// 命名的路由   
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

嵌套路由

嵌套路由使用的非常广泛 因为实际的界面通常由很多组件组合而成 URL中的动态路径也需要组成某种结构

来看下面的代码

<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
        }
      ]
    }
  ]
})

注意 以/开头的嵌套路径为根路径 因此在children里面 path是没有/的

响应路由参数变化

1、使用$watch检测

const User = {
	template:'...',
	watch:{
		'$route' (to,from){
			///
		}
	}
}

2、使用导航守卫

const User = {
	template:'...',
	beforeRouteUpdate (to,from,next){
		///
	}
}

mode

hash:默认模式
history:history.pushState API 来完成 URL 跳转而无须重新加载页面。

导航守卫

router.beforeEach
全局前置守卫：导航触发，进入路由之前。

router.beforeResolve
全局解析守卫：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

router.afterEach
全局后置钩子：钩子不会接受 next 函数也不会改变导航本身。

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

组件内的守卫
beforeRouteEnter 进入路由前
beforeRouteUpdate (2.2 新增) 路由复制同一个组件（参数或查询的改变）
beforeRouteLeave 离开路由前