vue做的都是单页应用,只有一个主页面index.html,所以标签不起作用的,这就要使用vue-router来进行管理
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。在vue-router单页面中,路径之间的切换就是组件的切换。
用vue-cli产生项目结构,src文件目录下会有一个router文件夹,此处就是编写路由组件的地方 :src/router/index.js,
用于渲染匹配到的组件
<template>
<router-view />
</template>
<script>
export default {
name: 'App',
}
</script>
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:‘/’
作用:
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:路由的控制参数
vue3.0与2.0不同,
引入:
import { createRouter, createWebHashHistory } from 'vue-router'
hash是带#号:
const router = createRouter({
history: createWebHashHistory(),
routes
})