在vue中 引入路由

1.安装路由

npm install --save vue-router

2.配置独立的路由文件

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

const routes = [

  {

    path: '/',

    name: 'plant',

    component: () => import('../views/Plant.vue')

  },

  {

    path: '/admin',

    name: 'admin',

    component: () => import('../views/Admin.vue')

  }

]

const router = createRouter({

     history:createWebHistory()  ,       // http://localhost:8080/about

  // history: createWebHashHistory(),   //http://localhost:8080/#/about

  routes

})

export default router

3.引入路由到项目（在main.js）

import router from './router'

createApp(App).use(store).use(router).mount('#app')

 4. 指定路由显示入口(在app.vue中)

  <router-view/>

5.指定路由跳转

<router-link to="/">plant</router-link> |

<router-link to="/admin">admin</router-link>

6.展示成果