SPA应用——Vue Router

Vue Router

当今，SPA应用相比较传统项目使用的MPA应用页面结构，可以更好的提供给用户舒适的体验，而 Vue Router 是Vue.js官方提供的一种路由管理器，让构建单页面应用变得易如反掌，下面，来介绍一下初步使用的一些注意的点

一、安装与配置vue-router

yarn add vue-router

1. 一般我们vue项目开发是在vue-cli脚手架中进行的，所以下面的使用介绍也是应用在脚手架中进行讲解

首先我们要在配置文件中引入我们的Vue Router，并且通过Vue.use()来注册完成注册路由

// 引入router
import Vue from 'vue'
import Router from 'vue-router'

// 通过Vue.use方法来注册插件
Vue.use(Router)

2. 引入完成后，我们开始创建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'
  }
]

3. 进行完路由配置后，我们还需要在根实例（main.js）上注入router，是为了让所有的组件都能通过this来拿到$route和$router身上自带的一些相关功能api

// 引入router实例
import router from './router'
new Vue({
  render: h => h(App),
  // 目的：让我们的组件上面可以访问到路由相关的api($route和$router)
  router
}).$mount('#app')

4. 我们在index.js文件中配置了路由后，可以通过yarn serve的方式来开启服务器，得到我们的前端页面，此时我们会发现，页面上并没有配置好的组件结构，那是因为我们还缺少一个进行路由跳转的接收标签——router-view

我们可以通过在我们要插入配置的路由组件的地方，写入一个router-view标签来接收内容，此时页面上便会显示出配置好的组件结构

5. 这时，我们就可以通过在页面地址栏输入/+我们自己配置的路由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应用的基本模式就已经结束了

二、开发实际问题

1. 有时候，我们需要在路由跳转的时候上传参数，路由传参的方式主要有两种：路由参数和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']

2. 路由模式

路由有两种模式——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了。

3. 路由守卫

在某些情况，当路由跳转前和跳转后，我们需要进行一些相应的操作，这时，我们就可以使用路由提供的一些钩子函数来监听路由的变化了

• 全局路由

  在路由表中设置

  //全局的前置路由守卫  路由跳转之前就会执行
  //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页面应用的一些常用操作，若有出入，欢迎指出，立马改正