路由的详解及vue-router模块实例

演示项目源码

• 什么是路由？

1、后端路由：早期会通过解析不同的URL，服务器找到对应的资源，并渲染成页面，最后将对应的页面返回给客户端直接展示。
2、前端路由：前后端分离后，可以先通过静态资源服务器拿到HTML+CSS+JS文件，然后在进入不同页面的时候使用Ajax获取API服务器上的数据资源，这样最大的优点就是前后端责任清晰，后端专注于数据，前端专注于可视化，服务器压力也比较小。
3、前端路由/SPA：
a、首先，对于单页面应用程序整个项目只有一个HTML，用户一开始就获取整个项目静态资源。
b、SPA是在前端路由的基础上又增加了一层前端路由，通过监测href的数据来切换不同的组件，切换到的组件发起Ajax请求，最后在API服务器上拿到数据资源，看起来就像进入了新页面一样。
c、vue-router是通过hash来修改href并可以做到不刷新页面。（href是一个栈储存，先进后出）
备注：URL：
协议：// 主机：端口/路径？查询#哈希
scheme:// host:port/path?query#fragment

location.hash = '/home'
history.pushState({}，''，'/home') // HTML提供的方法
history.go(-1) // 复数后退，正数为前进，数字带表步数

• 具体的使用方法：

// 安装vue-router，并新建文件夹router->index.js
npm install vue-router --save 

在index.js中配置路由项

import Vue from 'vue'
import VueRouter from 'vue-router'
import about from '@/components/about'
import home from '@/components/home'

use(VueRouter) // 安装注入插件
routes = [
  {
    path: '/',
    name: 'home',
    component: home,
    redirect: '/home' // 重定向
    meta: {   // 元数据（描述数据的数据）
        title: '首页'
    },
    beforeEach: (to, form, next) => {}, // 路由独享守卫
    children: [  // 嵌套子路由
        {
          path: '/',
          component: isMessage
        },
        {
          path: 'isMessage',
          component: isMessage
        },
        {
          path: 'isNew',
          component: isNew
        }
      ]
  }，
  {
    path: '/about/:aboutId', // 动态绑定路由
    component: about,
    meta: {
        title: '关于'
      },
  }，
  {
    path: '/shopList',
    component: shopList,
    meta: {
    title: '商品',
    
   },
 }
]
// 创建router实例
const router = new VueRouter({
  routes
})
// 前置守卫（guard）
router.beforeEach((to, form, next) => {
  window.document.title = to.matched[0].meta.title // 修改每个页面的标题
  next() // 必须调用，否则不生效
})
// 后置钩子（hook）
router.afterEach((to, form) => {
  console.log(to) 
})
export default router // 导出实例

挂载到vue实例

// 在main.js中
import router from './router' // 导入
new Vue({
  el: ''#app',
  router,
  render: h => h(App) 
})

路由跳转

<router-link to="/home" tag="button" replace>按钮</router-link>
// tag指定渲染成什么样的标签，replace不会在history中留下记录，无法回退
this.$router.push('/home')
this.$router.replace('/home') // 无痕浏览
this.$router.go('/home') // 接受一个整数作为参数，在 history 记录中向前后多少步
<router-link :to="'/about/'+aboutData" tag="button">关于</router-link>
// 动态页面的跳转aboutData在data中定义
<h3>{{$route.params.aboutId}}</h3>
 // 在about页面中用可以拿到在动态的URL
<keep-alive exclude='about'>  
// exclude排除某个路由不缓存，include为缓存，使用页面name属性标记，多个状态用逗号且不能使用空格
// 路由来回跳转时，保持页面不更新
  <router-view/>
</keep-alive>
activated () { // 活跃状态执行函数
  this.$router.push(this.path) // 在活跃状态的时候直接进入到需要展示的路由 
},
deactivated() { // 非活跃状态执行函数
  console.log('deactivated')   
},
// 以上两个函数必须适应keep-alive才会有效
beforeRouteLeave (to, from, next) {
  this.path = this.$route.path // 离开页面的时候记录下用户选择的路由
  next()
}

嵌套路由

<router-link to='/home/isMessage'>消息</router-link>
<router-link to='/home/isNew'>新闻</router-link>
<router-view/>

路由的懒加载：js的静态资源按组件分包，用到时再发送请求

// import about from '@/components/about'
// import home from '@/components/home'
const about = () => import('@/components/about')
const home = () => import('@/components/home')

路由传参

<router-link :to="{path:'/shopList',query:{userId: '9527'}}" tag="button"></router-link> // 传参
<h3>{{$route.query.userId}}</h3> // 接收参数
// 函数跳转
<button @click="listClick">商品</button>
listClick () {
 this.$router.push({
   path: '/shopList',
   query: {
   name: 'word'
   }
 })}
<h3>{{$route.query.name}}</h3> // 接收参数

组件内守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}