vue-router使用

vue-router

记录下在vue中使用vue-router做路由的基础用法。

安装vue-router

npm install vue-router --save

挂载vue-router

在src文件夹下创建routes并创建main.js文件

下列是INote的路由源码，做示例：

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
    {
        name: 'notes',
        path: '/',
        component: () => import('../views/Notes.vue'),
    },
    {
        name: 'settings',
        path: '/settings',
        component: () => import('../views/Settings.vue'),
    },
    {
        name: 'my',
        path: '/my',
        component: () => import('../views/My.vue'),
    },
    {
        name: 'login',
        path: '/login',
        component: () => import('../views/Login.vue'),
    },
    {
        name: 'about',
        path: '/about',
        component: () => import('../views/About.vue'),
    },
    {
        name: 'editor',
        path: '/editor/:index',
        component: () => import('../views/Editor.vue')
    },
    {
        name: 'markdown',
        path: '/markdown/:index',
        component: () => import('../views/Markdown.vue')
    }
];

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

router.beforeEach((to, from, next) => {
    if (to.name == 'my') {
        // 获取本地存储的token
        const token = localStorage.getItem('token')
        // 如果有token
        if (token) {
            // console.log(1)
            next()
        } else {
            // 如果没有token，则重定向到login路由
            if (to.name !== 'login') {
                next({ name: 'login' })
            } else {
                // 否则继续导航
                next()
            }
        }
    } else {
        next()
    }

})

export default router

在src下的main.js下引入vue-router：

import router from './routes'

并在createApp后挂载router：

.use(router)

再打开App.vue并引入vue-router:

import { useRouter } from 'vue-router'

将router实例化：

const router = useRouter()

在<template>标签中写入router的路由：

<router-view></router-view>