SPA（ single page App ） 单页面应用
多页面应用 有多个html文件，通过a标签的连接联通各个页面缺点
开发起来太冗余，编译、压缩很耗时间页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏 单页面应用
不需要刷新页面，因为它就是一个页面这个页面内容在切换单页面内容之间的切换要想实现我们就是用路由了如今我们的app、后台管理系统 主要的开发形式就是spa
vue的mode
hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/homehistory: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /homeabstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】hash/history 常用于浏览器端，abstract用于服务端
vue-router 配置
安装 vue-router yarn add vue-router在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块引入第三方的依赖包, 并注册路由
import Vue
from 'vue'
import VueRouter
from 'vue-router'
Vue
.use( VueRouter
)
创建了一个router对象实例，并且创建路由表,导出router实例
const routes
= [
{
path
: '/home',
component
: Home
}
]
const router
= new VueRouter({
routes
})
export default router
入口文件main.js中引入路由实例 router , 然后在根实例中注册
import router
from './router/index.js'
new Vue({
router
,
render
: (h
) => App
}).$mount('#app')
给路由一个路由展示区域 在src目录下创建一个layout目录，在里面创建一个index.vue文件，用一个 router-view 的组件表示，然后在app.vue里面注册
<template>
<div id="app">
<lay-out></lay-out>
</div>
</template>
<script>
import LayOut from './layout'
export default {
name: 'app',
components: {
LayOut
}
}
</script>
当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上。业务： 错误路由匹配
const routes
= [
{
path
: '/',
redirect
: '/home'
},
{
path
: '/home',
component
: Home
},
{
path
: '/list',
component
: List
},
{
path
: '/error',
component
: Error
},
{
path
: '**',
redirect
: '/error'
}
]
vue的mode影响组件中标签
如果你使用的是 hash , 那么a标签就可以了、如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
router-link 这个组件 身上必须要有一个 to 属性router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存active-class改变选中效果tag改变生成标签 二级路由
const routes
= [
{
path
: '/shopcar',
component
: Shopcar
,
children
: [
{
path
: 'yyb',
component
: Yyb
}
]
}
]
命名路由
{
path
: 'yyb',
component
: Yyb
,
name
: 'yyb'
},
动态路由
配置反向代理module
.exports
= {
devServer
: {
proxy
: {
'/douban': {
target
: 'http://api.douban.com',
changeOrigin
: true,
pathRewrite
: {
'^/douban': ''
}
}
}
}
}
路由的传参<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}">
</router-link>
路由的接参id
: this.$route
.params
.id
query
: this.$route
.query
.xxx
编程式导航
push
this.$router.push(’/home’)this.$router.push({name,params,query})push可以将我们的操作存放到浏览器的历史记录 replace
this.$router.replace(’/home’)this.$router.replace({name,params,query})replace没有将我们的操作存放到浏览器的历史记录， 效果为返回了二级 push/replace的参数就是to属性的参数backgo
导航守卫
别名
导航守卫路由守卫路由钩子路由拦截 三种导航守卫
全局导航守卫
全局前置守卫 router.beforeEach(fn)
fn中有三个参数
to： 目标路由from： 当前路由next： 它是一个拦截，表示是否允许通过 使用场景： 当我们本地存储/cookie中有token，那我们就自动跳转 /mine 全局的解析守卫 router.beforeResolve(fn)
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。必须保证整个项目的守卫和异步路由组件解析完成 全局的后置守卫 router.afterEach(fn)
可以做一些用户友好提示 路由独享守卫
beforeEnter(fn)写在路由表中的守卫钩子针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的做路由拦截
案例： 权限验证
数据库： 用户组
普通用户管理员超级管理员 我们登录式，后台会返回给我们info信息，通过信息来判断它是哪个类型用户 组件内守卫
组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
导航进入组件时，调用this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问因为组件此时没有创建，所以没有this案例： 数据预载（进入组件前就获得数据） 组件内的后置守卫
当离开组件时，调用this是可以访问到案例： 注册/内容提交，用户交互提示 组件内的更新守卫（ 路由传参和路由的接参 ）
在当前路由改变，但是该组件被复用时调用举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 this next
next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由next( false ) 表示不通过， 表示从当前路由跳转不到目标路由next(’/login’) 等价于 next({path:’/login’}) 跳转指定的路由next(’/login’) 等价于 next({path:’/login’,params,query})next( fn ) 数据预载 业务
当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页当进入mine页面的时候， 要判断用户是否登录，如果没有登录，跳转登录页监听整个项目的路由变化情况 全局的前置守卫监听某个路由的变化情况 路由的独享守卫监听的路由组件的路由变化情况 组件内的导航守卫
动画效果和缓存
<transition
mode="out-in"
enter-active-class="animated fadeInLeft"
leave-active-class="animated fadeOutLeft"
>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
路由元信息-meta
{
path
: '/category',
component
: Category
,
name
: 'category',
meta
: {
f
: true
}
},
