vue安装路由

一、安装命令：

　　npm install vue-router --save 或者 cnpm install vue-router --save

二、新建一个router.js

 router.js大致内容

import {createRouter, createWebHistory} from 'vue-router'

const routes = [
    {
        path: '/',  //主页
        name: 'index',
        component: () => import('./views/Index'),
        meta: {
            title: 'index'
        }
    },
    {
        path: '/login',  //登录
        name: 'login',
        component: () => import('./views/LoginView.vue'),
        meta: {
            title: 'login'
        }
    }

]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    //     base:process.env.BASE_URL,
    routes
})

router.beforeEach(async (to) => {
    if (to.meta.title) { // 判断是否有标题
        document.title = to.meta.title;
    }
});

export default router

三、main.js中引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

四、App.vue里直接使用路由(使用下面直接全部替换App.vue文件)

?

1 2 3 4 5 6 7

<template>   <router-view/> </template>   <style>   </style>

备注： router.js里对应的路径，自己在src文件夹里自己新建.vue文件即可