Vue引入路由配置

在Vue中，我们可以通过vue-router路由管理页面之间的关系

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举

在Vue中引入路由

第一步：安装路由 npm install --save vue-router

第二步：配置独立的路由文件

xxxxxxxxxx
// index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

第三步：引入路由到项目

xxxxxxxxxx
// main.js
import router from './router'
app.use(router)

第四步：指定路由显示入口 <router-view/>

第五步：指定路由跳转

xxxxxxxxxx
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>