[JavaScript知识库]vue基础三--vue-router@4的配置及使用

说明

1. 要求：先安装好vue3
2. 安装vue-router@4
3. 配置router
4. 在main.js中配置
5. 在components中使用

一、安装vue-router@4

要先安装
npm init vite-app 项目名
npm install --save vue-router@4
注：vue3要安装router的版本是4，以下的版本不适用

二、配置router

1. 新建is文件（在src文件夹新建router）

import { createRouter,createWebHashHistory } from 'vue-router';
import Home from './components/Home.vue' #引入components单体文件
import Blog from './components/Blog.vue'

#createRouter创建路由
const router = createRouter({
    history:createWebHashHistory(),
    #用哈希模式
    routes:[
        {
            path:'/home', #路径
            component:Home #引入的components单体文件
        },
        {
            path:'/blog',
            component:Blog
        }
    ]
});

export default router; #暴露router路由

三、在main.js中配置

1. 引入路由
2. 使用router

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import router from './router.js' #引入router

const app = createApp(App)
app.use(router) #使用router
app.mount('#app')

四、在components中使用

<router-link to="path"></router-link> #路由位置
<router-view></router-view> #显示单文件内容

完