王张开

Appearance

about ​

vue3.2.37 + vite3.1.0 + vue-router4.1.6

中文文档：

vue-router是vue的核心的插件库，专门用来实现SPA(Single page web application, SPA)应用。

关于SPA应用

  • 单页面web应用。
  • 整个应用只有一个完整的页面。
  • 点击页面中的导航链接不会刷新整个页面，只会做页面的局部刷新。
  • 数据需要通过Ajax请求来获取。

快速上手 ​

1. 安装

# cdn
# 指定版本
<script src="https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js"></script>
# 最新版
<script src="https://unpkg.com/vue-router@4"></script>


# 通过npm下载指定版本，如4版本
npm install vue-router@4 -S

# 通过yarn下载指定版本，如4版本
yarn add vue-router@4

# 通过yarn下载最新版本
yarn add vue-router@4

我这里用的是4.1.6版本的。

2. 创建src/router/index.js文件

javascript
// import {createRouter, createWebHistory, createWebHashHistory, createMemoryHistory} from 'vue-router'
/*
createRouter：创建路由对象
三种路由模式：
	createWebHistory：html5路由，官方推荐使用的路由
	createWebHashHistory：基于hash的路由，
	createMemoryHistory：基于缓存的路由
	更多详细解释和各自的弊端，参考官网: https://router.vuejs.org/zh/guide/essentials/history-mode.html
*/
// 这里按需导入
import {createRouter, createWebHistory} from 'vue-router'

// 路由映射表
const routes = [
    {
        meta: {
            title: "luffy2.0-站点首页",
            keepAlive: true
        },
        path: "/",  // uri访问地址
        name:"Home",
        component: ()=> import("../views/Home.vue")
    },
    {
        meta: {
            title: "luffy2.0-登录页面",
            keepAlive: true
        },
        path: "/login",  // uri访问地址
        name:"Login",
        component: ()=> import("../views/Login.vue")
    },
]

const router = createRouter({
    // history指定路由模式
    history: createWebHistory(),
    // 注册路由列表
    routes, // `routes:routes`的缩写
});

// 暴露路由对象
export default router

3. 在src/main.js中注册

javascript
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 就这一行
import router from "./router/index";


// 然后use使用
createApp(App).use(router).mount('#app')

基本使用 ​

异步加载 ​

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

// 这么导入是同步加载，即访问主页的时候，就加载了该组件，无论你用不用
import Home from "@/components/Home";  // 两种导入组件的形式之1
// import About from "@/components/About"; // 至于.vue可加可不加，不影响的

const routes = [
	{
		path: "/",
		name: "Home",
		component: Home,
	},
	{
		path: "/about",
		name: "About",
        // 这样导入组件是异步加载，只在需要展示该组件的时候，才临时请求加载
		component: () => import('@/components/About'),  // 两种导入组件的形式之2
	}
]

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

重定向 ​

meta元数据 ​

meta简单来说就是路由元信息 也就是每个路由身上携带的信息。

title ​

bash
import {createRouter, createWebHistory} from "vue-router";
import {ElMessage} from 'element-plus'
// 路由映射表
const title = '供应链'

const routes = [
    {
        meta: {
            title: `${title}-登录`,
            keepAlive: true
        },
        path: "/login",  // uri访问地址
        name: "Login",
        component: () => import("../views/LoginView.vue")
    },
    {
        meta: {
            title: `${title}-注册`,
            keepAlive: true
        },
        path: "/register",  // uri访问地址
        name: "Register",
        component: () => import("../views/RegisterView.vue")
    }
]

const router = createRouter({
    // history指定路由模式
    history: createWebHistory(),
    // 注册路由列表
    routes, // `routes:routes`的缩写
});


router.beforeEach((to, from, next) => {
    // 结合meta中的title，设置当前页面的title信息
    // console.log(111, to.meta.title)
    // console.log(111, window.document.title)
    window.document.title = to.meta.title || '供应链系统'
    // to，即将访问路由对象
    // from，当前正要离开路由
    // next() 继续向后执行，去to的页面
    // next(false) 不跳转，还在当前页面。
    // next("/xxx")  next({name:"xxx"})  next({pat:"/xxx"})
    let token = localStorage.getItem("token");
    if (token) {
        // 已登录，可以向目标地址访问
        next();
        return
    }
    // 未登录，登录页面
    if (to.name === "Login" || to.name === "Register") {
        // ElMessage.error("登录已过期，请重新登录")
        next();
        return;
    }
    // 未登录，访问的其他地址
    next({name: "Login"});
})


// 暴露路由对象
export default router

keepAlive ​

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。