black

WELCOME

Vue -> Vue-Router

Vue-Router

该标签是一个vue-router中已经内置的组件

它会被渲染成一个a标签

tag

<router-link tag="button"></router-link>

此时不会默认渲染成a标签 而是button按钮

replace

replaceState()

active-class

当<router-link>对应的路由匹配成功时 会自动给当前元素添加一个router-link-active类属性

设置active-class可以修改默认的类名

<router-link active-class='active'> </router-link>

也可以在routes中设置一个属性来统一设置处于活跃的类样式

const router = new VueRouter({
  routes,
  linkActiveClass: 'active'
})

重定向

重定向也是通过 routes 配置来完成

const routes = [
  {
    # 重定向
    path: '',
    redirect: '/home'
    意思是当页面路径为为'', 立马把页面重定向到'/home'
  },
  .... 
]

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { 
      path: '/a', 
      redirect: { name: 'foo' }
    }
  ]
})

甚至是一个方法，动态返回重定向目标：

onst router = new VueRouter({
  routes: [
    { 
      path: '/a', 
      redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    	}
    }
  ]
})

注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。

为 /a 路由添加一个 beforeEnter 守卫并不会有任何效果。

别名

/a 的别名是 /b，意味着，

当用户访问 /b 时，URL 会保持为 /b，

但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为：

const router = new VueRouter({
  routes: [
    { 
      path: '/a', 
      component: A, 
      alias: '/b' 
    }
  ]
})

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

后端配置例子

原生 Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.html" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})
警告

给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
      path: '*', 
      component: NotFoundComponent 
    }
  ]
})

或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。

路由跳转

window.location

通过改变其属性值修改页面的 url。我们在单页应用中需要做到的是改变 url 不刷新页面，location 接口提供以下两种方式可以做到：

  1. location.href 赋值时只改变 url 的 hash
  2. 直接赋值 location.hash

location.search 会直接刷新页面

location.pathname 照道理来说只改变 hash 应该是可以的，但实际上浏览器会编码这个属性值，所以无法直接赋带 # 号的值。

window.history

history 接口是 HTML5 新增的，它有五个方法可以改变 url 而不刷新页面。

  1. history.pushState()
  2. history.replaceState()
  3. history.go()
  4. history.back() 等价于 history.go(-1)，history.forward() 则等价于 history.go(1)，这三个接口等同于浏览器界面的前进后退。
如何监听 url 的变化

现在我们已经知道如何不刷新页面改变页面的 url。虽然页面没刷新，但我们要改变页面显示的内容。

这就需要 js 监听 url 的变化从而达到我们的目的。

我们有两个事件可以监听 url 的改变：

hashchange

hashchange 事件能监听 url hash 的改变。

先要加上事件监听的代码：

window.addEventListener('hashchange', function(e) {
  console.log(e)
})

从上图中我们可以知道不管是通过 location 接口直接改变 hash，还是通过 history 接口前进后退（只是 hash 改变的情况下），我们都可以监听到 url hash 的改变。但这个事件也只能监听 url hash 的变化。所以我们需要一个更强大的事件：popstate。

popstate

popstate 事件能监听除 history.pushState() 和 history.replaceState() 外 url 的变化。

先加上事件监听的代码：

window.addEventListener('popstate', function(e) {
  console.log(e)
})

其实不止 history.pushState() 和 history.replaceState() 对 url 的改变不会触发 popstate 事件，当这两个方法只改变 url hash 时也不会触发 hashchange 事件。

hash 模式和 history 模式

我们都知道单页应用的路由有两种模式：hash 和 history。如果我们在 hash 模式时不使用 history.pushState() 和 history.replaceState() 方法，我们就只需要在 hashchange 事件回调里编写 url 改变时的逻辑就行了。而 history 模式下，我们不仅要在 popstate 事件回调里处理 url 的变化，还需要分别在 history.pushState() 和 history.replaceState() 方法里处理 url 的变化。而且 history 模式还需要后端的配合，不然用户刷新页面就只有 404 可以看了?

所以 hash 模式下我们的工作其实是更简单的，但为什么现在都推荐用 history 模式呢？总不是 hash 模式下的 url 太丑了，毕竟这是个看脸的世界?

不过 vue-router 在浏览器支持 pushState() 时就算是 hash 模式下也是用 history.pushState() 来改变 url，不知道有没什么深意？还有待研究...

这部分路由跳转内容来自 segmentfault - hugo_seth

前端路由hash模式和history模式为什么页面不会刷新？

修改hash然后回车不会发请求，hash只用于页面定位，也不会发到后台。浏览器判断url变化不会考虑hash部分，#号前的部分改变才会发请求。

利用HTML5/History就是BrowserHistory，依靠pushState保存历史记录，监听浏览器在历史记录上前进后退即popstate事件。history模式不是依靠url改变来切换路由的，因为url改变不会触发任何事件（除了hash）

用户不会在地址栏上去手打url。用户会点击页面上的导航按钮（Link组件），通过内部js逻辑来切换路由。点击Link组件不会发请求。

如果是BrowserHistory，也就是History那一套，这是没法避免页面refresh的，因为在地址栏上按回车就相当于你按ctrl + shift + r，这个模式没有hash部分，改变的是#号前的内容，自然要发送请求。

hash看起来简单很多，而且刷新页面会保留之前的hash，而history通常需要依赖localStorage等前端数据持久化策略（为了在强制刷新后能恢复到之前的路由，不然刷新一下就404要么就跑回首页了），还要在后端将所有路由请求的url重定向到index。

切换路由history是重新请求了服务器的，只不过这两个api不会刷新页面，且服务器做了重定向，比如每次都是返回的index页面，然后前端这边去做的路由匹配显示对应内容。

hash模式就是加#，是页面里的锚。切换页面只是进行锚的修改，切换显示的div而已，通过onhashchange来监听hash的改变，没有发生页面跳转行为。

history是浏览器的API，同样保存了切换状态，使用此模式的history.pushState只会向浏览器添加一条记录，页面内容不会发生任何改变。页面内容之所以能改变，和上面的切换div一样，将对应的div操作与pushState操作配套起来。

举个最直观的例子，我们现在F12并在控制台输入一下代码

history.pushState({title: 'b'}, 'bbb', 'bbbb')

会立刻发现导航栏的地址改变了，但是当前页面内容不变。如果此时再刷新浏览器的话，会发现404，知乎服务器并不能响应该地址。

实际上hashHistory和browserHistory在用法上只是在后台不同而已，browserHistory需要处理/a/b/c这种get请求，返回index.html，而hashHistory只需要处理/去返回index.html。

该问题答案来源于 知乎 - 匿名用户 知乎 - sweetYoMi 知乎 - 魔力sama 知乎 - 橘子

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，

例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。

如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。

确保正确使用 components 配置 (带上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
嵌套命名视图

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例：

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+
  • Nav 只是一个常规组件。
  • UserSettings 是一个视图组件。
  • UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件。

UserSettings 组件的 <template> 部分应该是类似下面的这段代码：

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

可以用这个路由配置完成该布局：

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [
    {
   		path: 'emails',
    	component: UserEmailsSubscriptions
  	}, 
    {
    	path: 'profile',
    	components: {
      	default: UserProfile,
      	helper: UserProfilePreview
    	}
  	}
  ]
}

代码路由跳转

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，

所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

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

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

//如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。
//取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

// 同样的规则也适用于 router-link 组件的 to 属性。

可选的在 router.push 或 router.replace 中

提供 onComplete 和 onAbort 回调作为第二个和第三个参数。

这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise。

# App.vue
<template>
<button @click="handleClick">
</template>

<script>
export default{
	name: 'App',
  methods: {
    handleClick() {
      //this为当前组件 所有的组件都一个$router属性 
      this.$router.push('/home')

      this.$router.repalce('/home')
      // 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
      
      # 不要绕过VueRouter来修改路由
      
    }
  }
}
</script>

//Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。

动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。

# router/index.js
import VueRouter from 'vue-router'
import Vue from 'vue'

import User from '../components/User'

# 该方法默认执行VueRouter.install方法
Vue.use(VueRouter)

const routes = [
  {
    // 动态路径参数 以冒号开头 
    // 当匹配到一个路由时，参数值会被设置到 this.$route.params可以在每个组件内使用。
    path: 'user/:userid',
    component: User
  }
]
const router = new VueRouter({
  routes,
})
export default router


# App.vue
<template>
	<div id="app">
    <router-link :to="'/user/'+userId" > </router-link>
		<router-view> </router-view>
  </div>
</template>

<script>
  export deafult {
    name: 'App',
    data() {
      return {
        userId: 'lee'
      }
    }
  }
</script>

# Userser.vue
<template>
	<div>
  # $routes为当前活跃的路由对象
  // 显示用户信息
    {{$route.params.userid}}
  </div>
</template>

<script>
  export deafult {
   name: 'User',
   computed: {
     userid() {
       return this.$route.params.userid
     }
   }
  }
</script>


// 可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。
模式：1. /user/:username 2. /user/:username/post/:post_id												
匹配路径：1. /user/evan 2. /user/evan/post/123				
$route.params：1. { username: 'evan' } 2. { username: 'evan',post_id: '123' }														
						

// 除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等。

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}
// 或者是路由导航守卫

捕获所有路由或 404 Not found 路由

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。

路由 { path: '*' } 通常用于客户端 404 错误。

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

懒加载

结合 Vue 的异步组件和 Webpack 的代码分割功能

如果启动程序时一次性请求所有的数据可能会造成卡顿和白屏等问题

所以需要实现懒加载功能

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块

即首次不请求所有的资源 而是在这个路由被访问到时才加载请求该组件的内容

# router/index.js
...
# 1.结合Vue的异步组件和Webpack的代码分析
const Home = resolve => {require.ensure(['../components/Home.vue'], 
                         () => {resolve(require('../components/Home.vue'))} )}
# 2.AMD写法
const Home = resolve => require(['../components/Home.vue'], resolve)
# 3.ES6
const Home = () => import('../components/Home.vue')

const routes = [
  {
    path: '/home',
    component: Home
    # 或者
    component: () => import('../components/Home.vue')
  }
]

打包之后除了整体的

app.xxxxxx.js -> 程序的代码

manifest.xxxxx.js -> 业务代码 底层支撑

vendor.xxxxx.js -> 第三方程序代码 如vue/vue-router...

之外

还有懒加载的js代码

0.xxxxx.js 1.xxxxxx.js

这样就让用户在请求的时候效率更高

路由嵌套

<router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。

同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。

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

例如，在 Home 组件的模板添加一个 <router-view>：

home/message 通过Home页面来访问其中的message信息

一个路径映射一个组件 访问该路径也会渲染一个组件

实现路由嵌套的步骤：

  1. 创建对应的子组件，并且在路由映射中配置对应的子组件
  2. 在组件内部使用<router-view>标签
# HomeMessage.vue
<template>
	<div>
  	<ul>
  		<li>message></li>
  	</ul>
  </div>
</template>

<script>
  export deafult {
   name: 'HomeMessage',
  }
</script>

# router/index.js
...
const HomeMessage = () => import('../components/HomeMessage.vue') 
const routes = [
  {
    path: '/home',
    component: Home,
    children: [
      // 如果需要子组件默认显示一个的话
      {
        // 以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
        // path:'',
        path: '',
        redirect: 'message'
      },
      {
        // 当 /home/profile 匹配成功，
        // HomeMessage 会被渲染在 Home 的 <router-view> 中
        path: 'message',
        components: HomeMessage
      }
    ]
  }
]



# Home.vue
<template>
	<div>
  	// /home/message中的/home不能省
  	<router-link to='/home/message'></router-link>
  	//此处为其子路由显示的内容位置
 		<router-view></router-view>
  </div>
</template>

<script>
  export deafult {
   name: 'Home'
  }
</script>

参数传递

从一个页面跳到另外一个页面的时候传递一些消息

  1. 创建新的组件
  2. 配置路由映射
  3. 添加跳转的<router-link>
params

见上 动态路由

query
# Profile.vue
<template>
	<div>
  	Profile
	//使用传递的信息
		<p>{{$route.query}}</p>
		<p>{{$route.query.name}}</p>
  </div>
</template>

<script>
  export deafult {
   name: 'Profile'
  }
</script>

# App.vue
<template>
	<div id="app">
  	<router-link :to="{path: /profile, query: {name: 'lee', age: 20}}">
      //拼接后的结果为localhost:8080/profile?name=lee&age=20
    </router-link>
 		<router-view></router-view>
  </div>
</template>

<script>
  export deafult {
   name: 'Home'
  }
</script>

# router/index.js
const routes = [
  {
    path: 'profile',
    component: Profile
  }
]

如果不使用<router-link>而是使用button

# App.vue
<template>
	<div id="app">
  	<button @click="handleClick"></button>
 		<router-view></router-view>
  </div>
</template>

<script>
  export deafult {
   name: 'Home',
   data() {
     return {
       userId: 'lee'
     }
   }
   methods: {
     handleClickQuery() {
       # query
       this.$router.push({
         path: '/profile',
         query: {
           name: 'lee',
           age: 20
         }
       })
     },
    handleClickParams() {
      # params
      this.$router.push('/User/'+this.userId)
    }
   }
  }
</script>

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

这两种方式都会把路由导航到 /user/123 路径。

导航守卫

“导航”表示路由正在发生改变。

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

参数或查询的改变并不会触发进入/离开的导航守卫。

如果想要在路由跳转过程中来进行一些操作

但是如果手动在每一个组件的生命周期来配置一些事件处理函数太过于繁琐

所以可以利用路由守卫来进行统一的处理操作

参数介绍

守卫钩子中的参数是一个函数

该函数的参数为to, form, next

(

to: Route, from: Route

next: (to?: RawLocation | false | ((vm: V) => any) | Void) => void

) => any

其中next为一个函数 其中可以传递一些参数 一定要调用该方法来resolve这个钩子

如

  • next() 什么都不传 进入到下一个 如果全部钩子都执行完了 则导航的状态就是confirmed(确认的)

  • next(false) 中断当前的导航

  • next('/') or next({path: '/'}) 跳转到一个不同的地址 当前的导航被中断 然后进行一个新的导航 可以在此处传递任意位置对象 如replace: true | name: 'home' | router-link 中的 to | router.push中的选项

  • next(error) 如果传入的是一个Error实例 则导航会被终止且该错误会被传递给router.onError()注册过的回调

  • 确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

  • 这里有一个在用户未能验证身份时重定向到 /login 的示例：

    // BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

除非是最后一个路由组件 要不然next不可以省略 如果省略就没办法进行跳转

全局前置守卫

当一个导航触发时，全局前置守卫按照创建顺序调用。

守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

全局守卫意味着只要有路由跳转 都会来到该守卫

# router/index.js
const routes = [
  {
    path: '/home'
    component: 'Home',
    meta: {
    	title: '首页'
  	},
  	children: [
  		{
  			path: 'news',
  			component: HomeNews
  		}
		]
  }
]
const router = new VueRouter({
  routes,
  mode: 'history'
})
router.beforeEach((to, from, next) => {
  	//如果想在路由跳转的时候 修改页面的title
  	document.title = to.matched[0].meta.title
  	//matched[0]是因为如果存在嵌套路由的情况下 默认也会选中第一个父路由 如果没有该属性 则会使首页标题为undefined
  	next()
	}
}
export default router
全局解析守卫

router.beforeResolve

这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

# 和上面代码一个位置
//如果是后置钩子 不需要主动调用next()函数
//因为已经跳转完了 没有必要再进行其他操作了
//会先执行beforeEach() 后执行afterEach()
router.afterEach(to, from) {
  ...
}
路由独享守卫

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

只有进入到某个路由里面时 才会回调这个函数

# router/index.js
const routes = [
  {
    # 如果进入到User时 需要触发一个守卫
    path: '/user',
    component: User,
    beforeEnter: (to, from, next) => {
  		//进入这个路由之前会回调这个函数
  		next()
  	}
  }
]
组件内的守卫

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

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave
# Home.vue
<template>
	<div>
  </div>
</template>

<script>
  export deafult {
   name: 'Home',
   beforeRouteEnter(to, from, next) {
     # 不能获取组件实例this 因为当守卫执行前 组件实例还没有被创建
     // 在渲染该组件的对应路由被确认前调用
		// 不过可以通过传递一个回调给next来访问组件实例 在导航被确认的时候执行回调 并且把组件实例作为回调方法的参数
     next(vm => {
       # 通过vm访问组件实例
       // 该守卫是唯一支持next传递回调的守卫 因为对于其他两个组件内守卫来说 this已经可用 所以不支持传递回调 因为没有必要
     })
   },
        
   beforeRouteUpdate(to, from, next) {
     # 在当前路由改变 但是组件被复用时调用
    // 如 home/news -> home/message 或者是一个带有动态参数的路径 
    // 还是当前组件，只是参数发生了变化 所以组件实例会被复用 
    // 这个钩子就在这种情况下调用来响应这个变化 
     # 可以访问this
     // 这个离开守卫通常用于来禁止用户还未保存修改前突然离开 该导航可以通过next(false)来取消
   },
   beforeRouteLeave(to, form, next) {
     # 导航离开该组件的对应路由时调用
     # 可以访问this
   }
  }
</script>
完整的导航解析流程
  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

keep-alive

在通常的情况下 每一次切换路由 都会有相应的组件频繁的被销毁和被创建

过于浪费性能

所以可以把路由组件放在<keep-alive></keep-alive>组件中

该组件也是一个内置的组件 可以使被包含的组件保留状态 避免重新渲染

如果<router-view>被包在<keep-alive>里面 所有路径匹配到的视图组件都会被缓存

# App.vue
<keep-alive>
	<router-view></router-view>
</keep-alive>

<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

<keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

activated deactivated
# Home.vue
...
<script>
  export default {
		activated() {
      // 当被缓存的组件被创建时调用
    },
    deactivated() {
      //当被缓存的组件被销毁时调用
    }
	}
</script>
include exclude

include-接收字符串或者正则表达式 只有匹配的组件会被缓存

exclude-接收字符串或者正则表达式 所有匹配的组件都不会被缓存

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

# App.vue
<keep-alive exclude="User,Profile">
  # 不可以有空格 User, Profile 这样是匹配不到Profile的
max

数字。最多可以缓存多少组件实例。

  • 一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

路由元信息

定义路由的时候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

如何访问这个 meta 字段呢？

routes 配置中的每个路由对象为 路由记录。

路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录.

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。

因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

过渡动效

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>
  <router-view></router-view>
</transition>
单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，

可以在各路由组件内使用 <transition> 并设置不同的 name。

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}
基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

数据获取

有时候，进入某个路由后，需要从服务器获取数据。

例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

  • 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
  • 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：

<template>
  <div class="post">
    <div v-if="loading" class="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}
在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。

我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据，当数据获取成功后只调用 next 方法。

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。

第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

  • { x: number, y: number }
  • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

对于所有路由导航，简单地让页面滚动到顶部。

返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

如果你要模拟“滚动到锚点”的行为：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

我们还可以利用路由元信息更细颗粒度地控制滚动。

异步滚动

也可以返回一个 Promise 来得出预期的位置描述：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}
平滑滚动

只需将 behavior 选项添加到 scrollBehavior 内部返回的对象中，就可以为支持它的浏览器启用原生平滑滚动：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash,
      behavior: 'smooth',
    }
  }
}

整理多数来自文档的学习 以及社区博客的解答 有些东西可能没有消化的完全 但是学习总是要有一个过程的 加油

posted @ 2021-02-21 14:52  微风若里  阅读(275)  评论(1)  编辑  收藏  举报