vue——路由vue router

vue做的都是单页应用，只有一个主页面index.html，所以标签不起作用的，这就要使用vue-router来进行管理

一.介绍

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。在vue-router单页面中，路径之间的切换就是组件的切换。

二. 创建组件

用vue-cli产生项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方 ：src/router/index.js，

三. router-view

用于渲染匹配到的组件

<template>
  <router-view />
</template>

<script>
export default {
  name: 'App',
}
</script>

四. routes配置

const routes = [{
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/home/Home')
  },{
    path: '/cartList',
    name: 'CartList',
    component: () => import(/* webpackChunkName: "cartList" */ '../views/cartList/CartList')
  },{
    path: '/orderConfirmation/:id',
    name: 'OrderConfirmation',
    component: () => import(/* webpackChunkName: "orderConfirmation" */ '../views/orderConfirmation/OrderConfirmation')
  }, {
    path: '/orderList',
    name: 'OrderList',
    component: () => import(/* webpackChunkName: "orderList" */ '../views/orderList/OrderList')
  },{
    path: '/shop/:id',
    name: 'Shop',
    component: () => import(/* webpackChunkName: "shop" */ '../views/shop/Shop')
  }, {
    path: '/register',
    name: 'Register',
    component: () => import(/* webpackChunkName: "register" */ '../views/register/Register'),
    beforeEnter(to, from, next) {
      const { isLogin } = localStorage;
      isLogin ? next({ name: 'Home'}):  next();
    }
  }, {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login/Login'),
    beforeEnter(to, from, next) {
      const { isLogin } = localStorage;
      isLogin ? next({ name: 'Home'}):  next();
    }
  }
]

默认进入首页 path：‘/’

webpack内联注释

作用：
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。

懒加载 延迟加载

路由懒加载就是将路由匹配的组件变为异步组件，需要用到组件时候再进行加载。
如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页（vue单页面)时，需要加载的内容过多，时间过长，不利于用户体验。

在Vue-router路由配置中，将页面import进来，变成函数，只有执行此函数才会加载对应的组件。

五. 路由中的钩子函数

{
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login/Login'),
    beforeEnter(to, from, next) {
      const { isLogin } = localStorage;
      isLogin ? next({ name: 'Home'}):  next();
    }

to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数

六. history模式

vue3.0与2.0不同，
引入：

import { createRouter, createWebHashHistory } from 'vue-router'

hash是带#号：

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

hash history模式的区别