# Vue.js 实战之前端路由与 vue-router

# 前端路由与 vue-router

# 什么是前端路由

每次 GET 或者 POST 请求在服务端有一个专门的正则配置列表,然后匹配到具体的一条路径后,分发到不同的 Controller,进行各种操作,最终将 html 或数据返回给前端,这就完成了一次 IO。

前端路由的实现  有两种:

  • URL 的 hash,即锚点(#),js 通过 hashChange 事件监听 url 的变化
  • HTML5 的 History 模式

优点:

  • 页面持久性,如音乐网站
  • 前后端彻底分离,如 Angular 的 ngRouter,React 的 ReactRouter,还有 Vue 的 vue-router

需要考虑的问题:

  • 页面的拔插性
  • 页面的生命周期
  • 内存管理等

# vue-router 基本用法

# 新建目录 router
# 安装 vue-router
npm i -S vue-router

# index.js添加
import VueRouter from 'vue-router';
Vue.use(VueRouter);

在目录 router 新建 views 目录,接着新建 about.vue、 index.vue、 user.vue 等

// index.js
const Routers = [
  {
    path: "/index",
    component: (resolve) => require(["../router/views/index.vue"], resolve),
  },
  {
    path: "/about",
    component: (resolve) => require(["../router/views/about.vue"], resolve),
  },
  {
    path: "*",
    redirect: "../index", // 404指向首页
  },
];

const RouterConfig = {
  // 使用HTML5的history路由模式
  mode: "history",
  routes: Routers,
};

const router = new VueRouter(RouterConfig);

document.body.appendChild(root);

new Vue({
  router: router,
  render: (h) => h(App),
}).mount(root);

路由模式通过 HTML5 的 History 路由模式,通过 ‘/’设置路径。修改 package.json:

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js --mode=development --history-api-fallback"
},

增加了 --history-api-fallback,所有的路由都指向index.html

然后在根实例App.vue中添加<router-view></router-view>

# 跳转

vue-router 有两种跳转页面的方式:

  • <router-link>组件,会渲染成  <a> 标签,如:<router-link to="/about">跳转到 about</router-link>
    • tag : tag="li" 标签会被渲染成指定的 <li>
    • replace : 无历史记录
    • active-class
  • 使用 router 实例: router 方法,如:this.router.push('/index');
    • replace : this.router.replace('/index');
    • go : this.router.go(-1);

# 高级用法

问题:如何在 SPA 项目中,修改网页的标题?

一般我们是通过window.document.title = '标题'来修改,但是在什么时候修改,这是个问题。

vue-router 提供了导航钩子 beforeEach()afterEach(),它们会在路由即将改变前和改变后触发。

这样就解决了页面众多,维护麻烦的问题。(mounted 钩子)

router.beforeEach((to, from, next) => {
  // 从路由对象 to 里获取 meta 信息
  window.document.title = to.meta.title;
  // 判断页面是否登录
  if (window.localStorage.getItem("token")) {
    next();
  } else {
    next("/login");
  }
});

router.afterEach((to, from, next) => {
  // 页面跳转回来滚动条默认在顶端
  window.scroll(0, 0);
});

# 状态管理与 Vuex

# 状态管理与使用场景

组件的基本运行模式:一个组件分为数据和视图,数据更新时,视图也跟着更新...视图中又可以绑定一些事件,它们触发 methods 里指定的方法,从而可以改变数据、更新视图。

如果需要跨组件共享数据的需求,那就需要借助 Vuex 来管理组件状态。

# Vuex 基本用法

npm i -S vuex

# 高级用法

# 实战:中央事件总线插件 vue-bus(loading...)

练习地址)

Last Updated: 5/22/2020, 5:01:49 PM