5.vue-router路由

1、vue-router

vue router是vue.js的官方路由。与vue.js尝试集成，让用vue.js构建单页面应用变得轻松简单。

2、安装vue-router

npm install --save vue-router

3、配置独立的路由文件

在src文件夹下创建一个新的文件夹router，并在router下创建一个index.js文件，写入以下代码：

import { createRouter, createWebHashHistory } from "vue-router";
//import { createRouter, createWebHistory } from "vue-router";
import HomeView from '../views/HomeView'
import AboutView from '../views/AboutView'
const routes = [
    {
        path: "/",
        component: HomeView
    },
    {
        path: "/about",
        component: AboutView
    },
]
//配置信息中需要页面的相关配置
const router = createRouter({
    //createWebHistory:页面路径不会多一个#出来，比如http://localhost:8080/about，这种方式需要后台配合做重定向，否则会出现404
    //createWebHashHistory：页面路径会多一个#出来，比如http://localhost:8080/#/about
    history: createWebHashHistory(),
    routes
});
export default router;

4、在src下添加views文件夹，并在views下创建HomeView.vue和About.vue组件页面

<template>
    <h3>首页</h3>
</template>

<template>
    <h3>关于</h3>
</template>

5、在main.js中导入vue-router

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
// index.js是默认的，所以可以省略
import router from "./router"
// 指定给单页面安装上router
createApp(App).use(router).mount('#app')

6、给App.vue文件添加

<template>
  <!-- router-link实现页面跳转 -->
  <router-link to="/">首页</router-link> |
  <router-link to="about">关于</router-link>
  <!-- 路由的显示入口 -->
  <router-view></router-view>
</template>
<script>
export default {
  name: 'App',
}
</script>
<style>
*{
    margin: 0px;
    padding: 0px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>