vue——路由vue router

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

文章目录

  • 一.介绍
  • 二. 创建组件
  • 三. router-view
  • 四. routes配置
    • webpack内联注释
    • 懒加载 延迟加载
  • 五. 路由中的钩子函数
  • 六. history模式

一.介绍

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
})

你可能感兴趣的:(前端学习,vue.js,javascript,webpack)