Vue vue-router

文章目录

1.路由vue-router 的安装Vue.use()创建路由对象router-view 组件 2.动态路由路由对象$router 对象$route 对象$route.params 3.queryString$route.query编程式导航 路由组件的复用watch 4.路由守卫组件内守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave 路由守卫参数tofromnext 路由独享的守卫全局守卫beforeEachbeforeResolveafterEach 5.嵌套路由添加路由与子路由children 属性 子路由视图 6.重定向和别名重定向案例组件路由配置 别名404 7.路由组件传参案例默认处理对象模式的回调函数模式 8.数据获取导航完成之后获取导航完成之前获取扩展 - nprogress安装 9.路由动效10.滚动行为后退/前进 11.路由元信息通过 `meta` 定义要验证的路由 12.路由懒加载

1.路由

当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由

路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件

vue-router 的安装

npm i vue-router // OR yarn add vue-router

Vue.use()

通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter);

创建路由对象

通过 vue-router 提供的 Router 构造函数（类）创建路由对象，路由对象包含了当前使用的模式（hash、history）、路由信息（url 与 组件的对应关系）等信息

import Router from 'vue-router'; import Home from './views/Home.vue'; import Home from './views/About.vue'; const myRouter = new Router({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }); ..., new Vue({ ..., router: myRouter });

模式有两种一种是history,另一个是hash

router-view 组件

配置了路由信息以后，我们还需要中页面（组件）中指定路由对应的组件出现的位置，当当前访问的 url 与某个路由信息匹配的时候，该组件就会出现在 router-view 组件所在的位置

// App.vue <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <hr> <router-view/> </div> </template>

2.动态路由

有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url

/item/1 /item/2 /item/3 ...

我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理

... { path: '/item/:itemId', name: 'item', component: Item } ...

其中 :itemId 表示匹配的 url 中动态部分内容，如上面的 1,2,3 等，同时该值将被赋值给路由的变量 itemId

// home.vue <template> <div class="home"> <h2>商品列表</h2> <ul class="item-list"> <li class="head"> <span>名称</span> <span>价格</span> <span>操作</span> </li> <li v-for="item of items" :key="item.id"> <span> <router-link :to='{name: "item", params:{itemId: item.id}}'>{{item.name}}</router-link> </span> <span>{{item.price|RMB}}</span> <span> <button>添加到购物车</button> </span> </li> </ul> </div> </template> <script> import axios from 'axios'; import {RMB} from '@/filters/RMB'; export default { name: 'home', data() { return { items: [] } }, filters: { RMB }, created() { axios({ url: '/api/items' }).then(res => { this.items = res.data; }); } } </script> <style> ul { margin: 0; padding: 0; } li { list-style: none; } .item-list li { padding: 10px; display: flex; justify-content: space-between; height: 30px; line-height: 30px; border-bottom: 1px dotted #333; } .item-list li.head { font-weight: bold; } .item-list li span { min-width: 200px; } </style>

路由对象

vue-router 会在组件中添加（注入）两个属性

$router$route

$router 对象

该对象其实就是 new VueRouter(…) 得到的路由对象，通过该对象我们可以访问全局路由信息，调用路由下的方法，比如：go、back、push 等

$route 对象

通过该对象可以访问与当前路由匹配的信息

$route.params

获取动态路由有关的信息

// item.vue <template> <div> <template v-if="item"> <h2>商品详情 - {{item.name}}</h2> <dt>ID</dt> <dd>{{item.id}}</dd> <dt>名称</dt> <dd>{{item.name}}</dd> <dt>价格</dt> <dd>{{item.price|RMB}}</dd> </template> <template v-else> <h2>没有该商品信息</h2> </template> </div> </template> <script> import axios from 'axios'; import {RMB} from '@/filters/RMB'; export default { name: 'item', data() { return { item: null } }, filters: { RMB }, created() { let itemId = Number(this.$route.params.itemId); if (itemId) { axios({ url: `/api/item/${itemId}` }).then(res => { this.item = res.data; }).catch(err=>{}); } } } </script>

3.queryString

有的时候，我们可能也会用到 queryString

<select v-model="sort"> <option value="desc">从高到低</option> <option value="asc">从低到高</option> </select>

$route.query

我们可以通过路由对象 $route 的 query 属性来获取 queryString

... computed: { sort: { get() { return this.$route.query.sort || 'desc'; } } } ...

编程式导航

有的时候，我们可能需要用到编程的方式来导航（跳转），而不是点击链接。如：当 sort 发生改变的时候跳转

... computed: { sort: { get() { return this.$route.query.sort || 'desc'; }, set(newVal) { this.$router.push({ name: 'home', query: { sort: newVal } }); } } } ...

路由组件的复用

为了提高性能，增强路由组件的复用，当路由切换使用的是同一个组件的时候，则会复用该路由组件，而不是销毁重建，这个时候，我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化

watch

如果切换的路由复用了组件，这个时候，我们可以使用 watch 监听 $route

watch: { $route(to, from) { console.log('$route'); } } to : 改变之后的 $route 对象from : 改变之前的 $route 对象

但是我们可以使用 vue-router 提供路由守卫 （路由有关的生命周期函数）来处理路由有关的业务逻辑

4.路由守卫

当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫

组件内守卫路由独享守卫全局守卫

组件内守卫

定义在组件内的与路由有关的生命周期函数（守卫）

beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave

beforeRouteEnter

当路由解析完成，并中指定的组件渲染之前（组件 beforeCreate 之前），不能这里通过 this 访问组件实例，需要通过 next 回调来进行调用

beforeRouteEnter (to, from, next) { // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 next(vm => { // vm... }) }

beforeRouteUpdate

在当前路由改变，但是该组件被复用时调用

beforeRouteUpdate (to, from, next) { // 可以访问组件实例 `this` },

beforeRouteLeave

导航离开该组件的对应路由时调用

beforeRouteLeave (to, from, next) { // 可以访问组件实例 `this` }

路由守卫参数

to

即将要进入的目标 路由对象（$route）

from

当前导航正要离开的路由对象（$route）

next

路由确认回调函数，类似 Promise 中的 resolve 函数，一定要确保调用 next 函数，但是后续的导航行为将依赖 next 方法的调用参数

next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)

next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址

next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航

路由独享的守卫

可以在路由配置上直接定义 beforeEnter 守卫，相对来说，应用不多

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

全局守卫

全局守卫是注册在 router 对象（new VueRouter({…})）上的

beforeEachbeforeResolveafterEach

beforeEach

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

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

beforeResolve

在所有组件内守卫和异步路由组件被解析之后被调用

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

afterEach

导航被确认后调用

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

因为导航已经被确认，所以没有 next

5.嵌套路由

一些比较复杂的应用会有多层嵌套的路由和组件组成

在应用增加一个用户个人中心，用户中心又是由多个页面组成，如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nH4V4pxr-1594039000086)(assets/vue-router-usercenter.png)]

添加路由与子路由

... import User from './views/User.vue' import Profile from './views/User/Profile' import Cart from './views/User/Cart.vue' ... ... { path: '/user', component: User, children: [ { path: '', name: 'user', component: Profile }, { path: 'cart', name: 'user-cart', component: Cart } ] } ...

children 属性

一个路由中的 children 表示嵌套的子路由

子路由的 path 如果以 / 开头表示根路径，不再基于父级路径，否则基于父级 path如果一个子路由的 path 为空，表示为默认子路由如果一个路由有默认子路由，则父级 name 属性需要设置给这个默认子路由

子路由视图

有了子路由以后，还需要在视图组件中设置 router-view

// User.vue <template> <div> <h3>用户中心</h3> <ul class="left"> <router-link exact tag="li" :to="{name: 'user'}">基本信息</router-link> <router-link tag="li" :to="{name: 'user-cart'}">我的购物车</router-link> </ul> <div class="right"> <router-view></router-view> </div> </div> </template> <style scoped> .left { float: left; width: 200px; } .left li { line-height: 30px; cursor: pointer; } </style>

6.重定向和别名

重定向

有的时候，我们会根据某种需求对用户请求的页面进行重新定位

案例

现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道

组件

// BookChoose.vue <template> <div> <router-link :to="{name: 'book-boy'}">男生</router-link> <span> | </span> <router-link :to="{name: 'book-girl'}">女生</router-link> </div> </template> // BookBoy.vue <template> <div> BookBoy </div> </template> <script> export default { name: 'BookBoy', created() { localStorage.setItem('book-type', 'book-boy'); } } </script> // BookGirl.vue <template> <div> BookGirl </div> </template> <script> export default { name: 'BookGirl', created() { localStorage.setItem('book-type', 'book-girl'); } } </script>

路由配置

{ path: '/book', name: 'book', // redirect: { name: 'book-choose' } redirect: to => { let type = localStorage.getItem('book-type') return { name: type || 'book-choose' } } }, { path: '/book-choose', name: 'book-choose', component: BookChoose }, { path: '/book-boy', name: 'book-boy', component: BookBoy }, { path: '/book-girl', name: 'book-girl', component: BookGirl }

别名

重定向，是从一个路由切换到另外一个路由，而别名是不同的路由显示同一个页面，比如：/user 是用户中心的路由，/member ，我们也可以给这个页面定义另外一个路由，虽然在某些时候，重定向与别名有类似的效果，但是，别名不存在跳转，浏览器地址栏上显示的 URL 并不会切换

{ path: '/user', alias: '/member' component: User, }

404

{ path: '*', component: NotFound }

写在最后

7.路由组件传参

我们通常把路由直接映射（绑定）的组件称为 路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route

当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点

案例

我们对 item.vue 组件进行改造，当我们在 home.vue 的商品列表上移入移出，出现商品信息提示层

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGRzSOkT-1594039090715)(assets/item-tip-layer.png)]

// Home.vue <template> ... <li v-for="item of items" :key="item.id"> <span> <router-link @mouseover.native="mouseover(item.id, $event)" @mouseout.native="mouseout(item.id, $event)" :to='{name: "item", params:{itemId: item.id}}'>{{item.name}}</router-link> </span> <span>{{item.price|RMB}}</span> <span> <button>添加到购物车</button> </span> </li> ... <div class="tip" :style="{left: tip.left, top: tip.top}" v-show="tip.isShow"> <Item :itemId="tip.itemId"></Item> </div> ... </template> <script> ... export default { ..., data() { return { items: [], tip: { itemId: 0, isShow: false, left: 0, top: 0 } } }, ... methods: { ..., mouseover(itemId, e) { let pos = e.target.getBoundingClientRect(); this.tip.itemId = itemId; this.tip.left = pos.left + pos.width + 10 + 'px'; this.tip.top = pos.top + 'px'; this.tip.isShow = true; }, mouseout(itemId, e) { this.tip.isShow = false; } } } </script> <style> ... .tip { position: fixed; left: 0; top: 0; border: 1px solid #000; background: #fff; padding: 10px; } </style>

因为原来的 Item.vue 组件时通过 this.$route.params.itemId 来接收 itemId 的，但是作为功能组件 itemId 需要通过 prop 来传入了，这个时候，我们需要对 Item.vue 组件进行改造

<template> <div> <template v-if="item"> <h2>商品详情 - {{item.name}}</h2> <dt>ID</dt> <dd>{{item.id}}</dd> <dt>名称</dt> <dd>{{item.name}}</dd> <dt>价格</dt> <dd>{{item.price|RMB}}</dd> </template> <template v-else> <h2>没有该商品信息</h2> </template> </div> </template> <script> import axios from 'axios'; import {RMB} from '@/filters/RMB'; export default { name: 'item', props: ['itemId'], data() { return { item: null } }, filters: { RMB }, watch: { itemId() { this.getItem(); } }, created() { // let itemId = Number(this.$route.params.itemId); this.getItem(); }, methods: { getItem() { if (this.itemId) { axios({ url: `/api/item/${this.itemId}` }).then(res => { this.item = res.data; }).catch(err=>{}); } } } } </script>

但是这个时候，我们的 Item.vue 可以接收来自 props 的参数，却不可以处理来自路由的 params 参数了。为了能给让 Item.vue 组件既能接收 props 传递的参数，也能接收 route.params 传递的参数，需要对 路由 也进行一些改造

{ path: '/item/:itemId', name: 'item', component: Item, props: true }

默认处理

当 props 设置 为 true，那么 route.params 中的数据自动就会被设置为组件属性与组件原有 props 进行合并

对象模式的

我们也可以有选择的返回 props

{ path: '/item/:itemId', name: 'item', component: Item, props: {a: 1, b: 2} }

回调函数模式

也可以使用回调函数模式

{ path: '/item/:itemId', name: 'item', component: Item, props: r => ({ itemId: Number(r.params.itemId) }) }

8.数据获取

有的时候，进入某个路由以后，我们需要从服务端获取数据，比如 /item/:itemId ，通常，我们有两种方式来实现

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

这两种方式都没有任何问题（对错、好坏），自行选择

导航完成之后获取

<template> <div> <template v-if="loading"> Loading...... </template> <template v-if="hasError"> <h2>没有该商品信息</h2> </template> <template v-if="item"> <h2>商品详情 - {{item.name}}</h2> <dt>ID</dt> <dd>{{item.id}}</dd> <dt>名称</dt> <dd>{{item.name}}</dd> <dt>价格</dt> <dd>{{item.price|RMB}}</dd> </template> </div> </template> <script> import axios from 'axios'; import {RMB} from '@/filters/RMB'; export default { name: 'item', props: ['itemId'], data() { return { loading: false, hasError: false, item: null } }, filters: { RMB }, watch: { itemId() { this.getItem(); } }, created() { this.getItem(); }, methods: { getItem() { this.loading = true; if (this.itemId) { axios({ url: `/api/item/${this.itemId}` }).then(res => { this.item = res.data; }).catch(err=>this.hasError=true).then(_=>{ this.loading = false; }); } } } } </script>

导航完成之前获取

// item.vue <script> export default { ..., beforeRouteEnter( to, from, next ) { console.log('开始'); return axios({ url: `/api/item/${to.params.itemId}` }).then(res => { // 注意 beforeRouteEnter 还不能获取组件实例 next(vm => { vm.item = res.data; }); }).catch(err=>{ next(vm => { vm.hasError = true; }); }); }, beforeRouteUpdate(to, from, next) { return axios({ url: `/api/item/${to.params.itemId}` }).then(res => { // 注意 beforeRouteEnter 还不能获取组件实例 this.item = res.data; }).catch(err=>{ this.hasError = true; }); } } </script>

扩展 - nprogress

http://ricostacruz.com/nprogress/

安装

npm i nprogress // OR yarn add nprogress

配合 router 全局守卫

import NProgress from 'nprogress' import 'nprogress/nprogress.css' const router = new Router({ //... }); router.beforeEach((to, from, next) => { NProgress.start() next() }) router.afterEach((to, from, next) => { NProgress.done() }) export default router

9.路由动效

利用 transition 组件，我们还可以给路由导航加上动效

// App.vue <template> ... <transition name="fade"> <router-view/> </transition> ... </template> <style> .fade-enter-active { transition: opacity .5s; } .fade-leave-active { transition: none; } .fade-enter, .fade-leave-to { opacity: 0; } </style>

10.滚动行为

前端路由并没有重载整个浏览器，只是通过 DOM 进行了局部更新。所以，有的时候，浏览器的一只状态会被保持，比如 滚动条，当我们在一个页面中滚动滚动条，然后跳转到另外一个页面，滚动条会保持在上一个页面中，我们其实更希望滚动条能回到页面顶部，就像重载了整个页面一样

const router = new VueRouter({ routes: [...], scrollBehavior: () => ({ y: 0 }) });

后退/前进

正对 后退/前进 行为，会提供一个 savedPosition 参数，通过该参数返回历史记录中的滚动值

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

11.路由元信息

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

通过 meta 定义要验证的路由

const router = new Router({ routes: [ { path: '/user', component: User, children: [ { path: '', name: 'user', component: Profile, meta: { requiresAuth: true } }, { path: 'cart', name: 'user-cart', component: Cart, meta: { requiresAuth: true } } ] } ] }) const isLogin = true; router.beforeEach((to, from, next) => { NProgress.start() if (to.meta.requiresAuth && !isLogin) { next({ name: 'login', }) } else { next() } })

或者

const router = new Router({ routes: [ { path: '/user', component: User, meta: { requiresAuth: true } children: [ { path: '', name: 'user', component: Profile }, { path: 'cart', name: 'user-cart', component: Cart } ] } ] }) const isLogin = true; router.beforeEach((to, from, next) => { NProgress.start() if (to.matched.some(record => record.meta.requiresAuth) && !isLogin) { next({ name: 'login', }) } else { next() } })

12.路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' // import Home from './views/Home.vue' // import About from './views/About.vue' // import Item from './views/Item.vue' // import User from './views/User.vue' // import Profile from './views/User/Profile' // import Cart from './views/User/Cart' // import BookChoose from './views/Book/BookChoose' // import BookBoy from './views/Book/BookBoy' // import BookGirl from './views/Book/BookGirl' Vue.use(Router) const router = new Router({ mode: 'history', base: process.env.BASE_URL, scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }, routes: [ { path: '/', name: 'home', component: () => import('./views/Home.vue') }, { path: '/about', name: 'about', component: () => import('./views/About.vue') }, { path: '/item/:itemId', name: 'item', component: () => import('./views/Item.vue'), props: r => ({ itemId: Number(r.params.itemId) }) }, { path: '/user', component: () => import(/* webpackChunkName: "user" */ './views/User.vue'), meta: { requiresAuth: true }, children: [ { path: '', name: 'user', component: () => import(/* webpackChunkName: "user" */ './views/User/Profile.vue') }, { path: 'cart', name: 'user-cart', component: () => import(/* webpackChunkName: "user" */ './views/User/Cart.vue') } ] }, { path: '/book', name: 'book', // redirect: { name: 'book-choose' } redirect: to => { let type = localStorage.getItem('book-type') return { name: type || 'book-choose' } } }, { path: '/book-choose', name: 'book-choose', component: () => import(/* webpackChunkName: "book" */ './views/Book/BookChoose.vue') }, { path: '/book-boy', name: 'book-boy', component: () => import(/* webpackChunkName: "book" */ './views/Book/BookBoy.vue') }, { path: '/book-girl', name: 'book-girl', component: () => import(/* webpackChunkName: "book" */ './views/Book/BookGirl.vue') } ] }) router.beforeEach((to, from, next) => { NProgress.start() if (to.matched.some(record => record.meta.requiresAuth) && !isLogin) { next({ name: 'login', }) } else { next() } next() }) router.afterEach((to, from, next) => { NProgress.done() }) export default router