14.Vue引入路由配置

Vue引入路由配置

在src目录下创建router文件夹，再创建index.js

src目录下的views文件夹下，有两个组件分别是AboutView.vue 和HomeView.vue

import { creteRouter,createWebHashHistory } from "vue-router"
import HomeView from "../views/HomeView"
import AboutVirew from "../views/AboutView"

//配置页面的相关信息
const routes = [
    {
        //首页
        path:"/"
        component:HomeView
    },
    {
        path:"/about"
        component:AboutView
    }
]

const router = createRouter({
    
    //这有两种写法,结果是在路由有#
    //createWebHashHistory
    //原理:a标签锚点连接
    //		home:http://localhost:8080/#/
    //		about:http://localhost:8080/#/about
    
    
    
    //createWebHistory
    //此方式需要后台配合做重定向,否则会出现404问题
    //原理:H5 ushState()
    //		home:http://localhost:8080/
    //		about:http://localhost:8080/about
    
    
    
    history:createWebHashHistory(),
    
    routes
})

export default router; 

在main.js进行引入

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

create(App).use(router).mount('#app')

在App.vue中引用

<template>
	//路由的显示入口
	<router-link to="/">首页</router-link>
	<router-link to="/about">关于</router-link>
</template>