Vue-Router基础学习笔记(小结)

什么是Vue-Router

Vue-Router是Vue.js的路由管理库，专门提供路由功能实现SPA(Single Page Application, 单页应用)。它去掉了传统的同步方式，采用异步加载组件，一定程度上提高了web应用的速度和流畅度。

安装和使用Vue-Router

在Vue.js的基础上，通过npm安装Vue-Router，并在main.js中创建一个实例将Vue-Router注册到Vue.js中。接着在Vue组件中，我们可以通过Vue-Router提供的router-link和router-view等组件进行路由的跳转和组件的渲染。

// 安装Vue-Router
npm install vue-router
// main.js中的注册Vue-Router语句
import VueRouter from "vue-router";
import routes from "./router"; // 引入路由配置文件
Vue.use(VueRouter);
const router = new VueRouter({ routes });

// 在组件中使用router-link和router-view
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>

路由的配置

我们需要通过在main.js中声明路由的配置信息来完成路由的配置。路由的配置可分为静态路由和动态路由两种方式。

静态路由

静态路由的设定只需要在路由对象中声明path和component属性，如下：

// router.js路由配置文件
import Home from "./views/Home.vue";
import About from "./views/About.vue";
export default [
  {path: "/", redirect: "/home"}, // 路由重定向
  {path: "/home", component: Home},
  {path: "/about", component: About}
];

动态路由

动态路由可以通过路由对象中的path和component属性来赋值（与静态路由相同），但path属性传递的是带参数的路径，作为组件跳转时的传参，而component属性则对应的是该传参所对应的组件。例如：

// router.js路由配置文件
import User from "./views/User.vue";
export default [
  {path: "/", redirect: "/user/1"}, // 路由重定向
  {path: "/user/:id", component: User},
];

路由的导航

Vue-Router提供了路由导航守卫函数，对路由的跳转进行一系列控制。例如可以配置路由拦截器，进行权限控制。路由导航的基本用法是：

// main.js中的router实例对象
assign beforeEach(() => {
  next();
});

路由状态的管理

Vue-Router提供了路由状态的管理，可用于在router对象实例之间共享数据。例如在A页面修改了数据，但A页面跳转到B页面时，挂载在A页面组件实例上的数据会被销毁，但可以将这些数据存储在路由对象上，从而达到数据共享的效果。路由状态管理的基本用法是：

// main.js中的router实例对象
const router = new VueRouter({...});

// 路由状态管理
router.app_nav_state = {...};
router.beforeEach((to, from, next) => {
  router.app_nav_state.xxx = 'xxx';
  next();
});

// 在组件中使用
this.$router.app_nav_state.xxx;

示例1：路由拦截器

// main.js中的router实例对象
const router = new VueRouter({...});

// 路由拦截器
router.beforeEach((to, from, next) => {
  if (to.path.indexOf('/home') >= 0) {
    let isLogin = sessionStorage.getItem("isLogin");
    if (!isLogin) {
      next({
        path: "/login"
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

// 在Home.vue组件中进入到路由的触发
methods: {
    logout() {
      sessionStorage.setItem("isLogin", false);
      this.$router.push("/login");
    }
}

示例2：路由状态管理

// main.js中的router实例对象中声明路由状态管理
const router = new VueRouter({...});
router.app_nav_state = {};
router.beforeEach((to, from, next) => {
  router.app_nav_state.nav_type = to.meta.nav_type;
  next();
});

// 在Header.vue组件中利用路由状态渲染导航
<div v-if="nav_type === 'main'">
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
</div>