vue-router
路由
当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由
路由：把 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 About from './views/About.vue';
const myRouter = new Router({
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
});
...,
new Vue({
...,
router: myRouter
});
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>
vue-router
异步请求
在实际的应用开发中，与后端交互，进行异步请求是很常见的需求
axios
npm i axios
请求
// home.vue
<template>
<div class="home">
Home
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'home',
data() {
return {
items: []
}
},
created() {
axios({
url: 'http://localhost:7777/items'
}).then(res => {
this.items = res.data;
});
}
}
</script>
跨域
vue-cli 提供了一个内置基于 node 的 webserver ，我们可以使用它提供的 proxy 服务来进行跨域请求代理
vue.config.js
在项目的根目录下创建一个 vue.config.js 的文件，通过 npm run serve 启动服务的时候，会读取该文件
跨域请求代理配置
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:7777',
pathRewrite: {
'^/api': ''
}
}
}
}
}
修改配置文件，需要重启服务：
npm run serve
// home.vue
<script>
...
created() {
axios({
url: '/api/items'
}).then(res => {
this.items = res.data;
});
}
...
</script>
vue-router
动态路由
有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 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>
vue-router
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 提供路由守卫 （路由有关的生命周期函数）来处理路由有关的业务逻辑
vue-router
路由守卫
当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫
- 组件内守卫
- 路由独享守卫
- 全局守卫
组件内守卫
定义在组件内的与路由有关的生命周期函数（守卫）
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
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({…})）上的
- beforeEach
- beforeResolve
- afterEach
beforeEach
当一个导航触发时，全局前置守卫按照创建顺序调用
router.beforeEach((to, from, next) => {
// ...
})
beforeResolve
在所有组件内守卫和异步路由组件被解析之后被调用
router.beforeResolve((to, from, next) => {
// ...
})
afterEach
导航被确认后调用
router.afterEach((to, from) => {
// ...
})
因为导航已经被确认，所以没有
next
vue-router
嵌套路由
一些比较复杂的应用会有多层嵌套的路由和组件组成
在应用增加一个用户个人中心，用户中心又是由多个页面组成，如：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EBWr1JoM-1590902751279)(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>
vue-router
重定向
有的时候，我们会根据某种需求对用户请求的页面进行重新定位
案例
现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道
组件
// 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
}
写在最后
vue-router
路由组件传参
我们通常把路由直接映射（绑定）的组件称为 路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route
当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点
案例
我们对 item.vue 组件进行改造，当我们在 home.vue 的商品列表上移入移出，出现商品信息提示层
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JFqX61BC-1590902851865)(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) })
}
vue-router
数据获取
有的时候，进入某个路由以后，我们需要从服务端获取数据，比如 /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
vue-router
路由动效
利用 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>
vue-router
滚动行为
前端路由并没有重载整个浏览器，只是通过 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 }
}
}
vue-router
路由元信息
定义路由的时候可以配置 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()
}
})
vue-router
路由懒加载
当打包构建应用时，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
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
