SPA应用——Vue Router
Vue Router
当今，SPA应用相比较传统项目使用的MPA应用页面结构，可以更好的提供给用户舒适的体验，而 Vue Router 是Vue.js官方提供的一种路由管理器，让构建单页面应用变得易如反掌，下面，来介绍一下初步使用的一些注意的点
一、安装与配置vue-router
yarn add vue-router
- 一般我们vue项目开发是在vue-cli脚手架中进行的，所以下面的使用介绍也是应用在脚手架中进行讲解
首先我们要在配置文件中引入我们的Vue Router，并且通过Vue.use()来注册完成注册路由
// 引入router
import Vue from 'vue'
import Router from 'vue-router'
// 通过Vue.use方法来注册插件
Vue.use(Router)
- 引入完成后，我们开始创建vue路由
// 创建Router路由器实例对象
const router = new Router({
routes
})
我们可以在routes中定义我们所需要进行的路由配置，由于vue内部在进行webpack打包的时候，往往会把所有的js文件和成一个app.js，会造成进入页面的时候，即便是加入了login...，也严重影响了用户的体验，所以在这里我们可以利用路由的懒加载，将页面js文件再进行划分，需要的时候在加载页面用到的js文件，可以有效的分担首页所承担的加载压力，减少首页加载用时。
const routes = [
{
// url地址栏的路径
path: '/films',
// 根据url地址栏的路径映射的视图路由组件,并且进行懒加载，异步组件处理
component: () => import '@/views/Films',
//如果我们要进行二级路由的话，只需要在一级路由中写入一个children属性
children: [
{
name: 'now',
path: '/films/nowplaying',
component: () => import('@/views/films/Nowplaying')
},
{
name: 'ing',
path: 'comingsoon',
component: () => import('@/views/films/ComingSoon')
}
]
},
//在这里也可以进行默认路由的配置
{
path: '',
component: () => import('@/views/Films')
},
// 默认路由
{
path: '/',
// 默认改写到
redirect: '/films'
},
// 以上路由都没有匹配上的话进入通配路由
{
path: '*',
redirect: '/films'
}
]
- 进行完路由配置后，我们还需要在根实例（main.js）上注入router，是为了让所有的组件都能通过this来拿到$route和$router身上自带的一些相关功能api
// 引入router实例
import router from './router'
new Vue({
render: h => h(App),
// 目的：让我们的组件上面可以访问到路由相关的api($route和$router)
router
}).$mount('#app')
- 我们在index.js文件中配置了路由后，可以通过yarn serve的方式来开启服务器，得到我们的前端页面，此时我们会发现，页面上并没有配置好的组件结构，那是因为我们还缺少一个进行路由跳转的接收标签——router-view
我们可以通过在我们要插入配置的路由组件的地方，写入一个router-view标签来接收内容，此时页面上便会显示出配置好的组件结构
- 这时，我们就可以通过在页面地址栏输入/+我们自己配置的路由path来进行页面跳转了，我们就可以通过声明导航的方式来实现路由的跳转，就不需要在地址栏输入来进行测试了
//假如我们在Tabber组件里有一组数据
data() {
//这里存放数据
return {
navList: [
{ id: 1, title: '电影', path: '/films' },
{ id: 2, title: '影院', path: '/cinema' },
{ id: 3, title: '个人中心', path: '/center' }
]
}
<!--这时就可以通过声明导航来实现路由跳转-->
<router-link v-for='nav in navList'
tag='li'
:to='nav.path'
:key='nav.id'
active-class='active'
>{{nav.title}}
</router-link>
在这里，我们Vue Router完成SPA应用的基本模式就已经结束了
二、开发实际问题
- 有时候，我们需要在路由跳转的时候上传参数，路由传参的方式主要有两种：路由参数和queryString参数
- 路由参数主要是通过动态id的方式在路由表中进行设置
{path:'/detail/:id',component:Detail}
在该组件中，就可以利用我们在安装Vue Router时给根实例注入router，每个组件拿到的$route来拿到传过来的id
通过this.$route.params来使用
-
queryString参数主要是通过直接设置？,?后面的内容会被this.$route.query来拿到
-
利用prop可以将路由与组件解耦
我们在通过动态id来获取id时，往往会感觉this.$route.params来拿id过于冗余
可以在路由配置表中设置一个props: true
{path:'detail/:id',component:AppNewsDetail,name:'detail',props:true}
在路由中就可以通过props接收id，直接可以调用了props : ['id']
- 路由模式
路由有两种模式——hash模式和history模式，默认会使用hash模式，如果我们想使用history模式的话，我们只需在创建Router实例对象时设置mode: 'history'就可以了
//创建Router的实例对象
const router = new Router({
mode:"hash",
routes
})
-
hash模式的原理是hash改变会触发hashchange事件
- 兼容性好，iE8,地址栏有#，看起来不太舒服
-
history模式本质使用H5的histroy.pushState方法来更改url
- 兼容性不好，iE10,地址栏去掉了#，但是对后端有要求，否则会出现404的局面，就不太好了
总的来说，如果有去掉#号的需求的话，那必须是使用history了。
- 路由守卫
在某些情况，当路由跳转前和跳转后，我们需要进行一些相应的操作，这时，我们就可以使用路由提供的一些钩子函数来监听路由的变化了
-
全局路由
在路由表中设置
//全局的前置路由守卫 路由跳转之前就会执行 //from 当前导航正要离开的路由对象 //to 即将要进入的目标路由对象 router.beforeEach((to,from,next)=>{ if(from.path === "/cinema"){ console.log("从影院这边过来的哦...") } next() //必须要加next })//全局的后置路由守卫 路由跳转之后 router.afterEach((to,from)=>{ if(to.path === "/center"){ console.log("进入center了哦...") } }) -
单个路由钩子，在进入前执行，to参数就是当前路由
{
path:"/center",
component:()=>import(/*webpackChunkName:'center'*/"@/views/Center"),
beforeEnter(to,from,next){
console.log("进入到center之前....")
next()
}
}
- 路由组件钩子
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
以上，是使用vue-router在脚手架中进行SPA页面应用的一些常用操作，若有出入，欢迎指出，立马改正
