vue3 vue-router的使用

81 阅读1分钟

一、使用以下命令安装:

npm install vue-router

二、在store文件夹下新建index.js并且加入以下代码:

import {createRouter,createwebHashHistory } from vue-router

import Home from '../pages/home.vue' 
import About from '../pages/about.vue'

const routes = [
    {
        path:"/",
        name:Home,
        component: Home
    },
    {
        path:"/about",
        name:About,
        component: About
    }
]
const router = createRouter({
    history: createwebHashHistory(),
    routes
})
export default router

三、在main.js里:

import router from './ router/index' 
createApp (App)
    .use(router)
    .mount("#app')

四、在App.vue文件里写入如下代码:

<template>
    <div>
        <router-Link to="/">首页</router-Link> 
        <router-link to=l /about">关于</router-link> 
    </div>
    <router-view></router-view> 
</template>