vue路由的使用

第一步

 在src下创建一个router目录并在此目录下创建index.js文件，写如以下内容，再创建俩页面home.vue和about.vue

import {createRouter, createWebHashHistory} from "vue-router";
//需要导入的页面名称和对应的位置
import Home from "@/components/Home";
import About from "@/components/About";

const routes= [
    {   //设置路径
        path : '/home',
        //上面这个路径对应的地址
        component: Home
    },
    {
        path : '/about',
        component: About
    }
]
const router = createRouter({
    routes,
    history:createWebHashHistory()
})

export default router;

 第二步

在main.js文件导入router并使用

import { createApp } from 'vue'
import App from './App.vue'
//导入路由
import router from "./router";
//通过.use()使用路由
createApp(App).use(router).mount('#app')

 

第三步

在vue.config.js文件中关闭页面名称必须使用组合单词的设置

lintOnSave:false

第四步

在一个页面中写上以下代码

<!--路由的显示入口-->
<router-view></router-view>
<router-link to="/home">home</router-link>  ||
<router-link to="/about">about</router-link>

最后效果