vuecli4配置路由 简单记录一下

1. 首先安装路由

npm install vue-router

2. 安装完成后，在项目中新建一个router文件夹，一个index.js
   

3. index.js 中写入

import { createRouter, createWebHashHistory } from 'vue-router'
import Index from '../views/Index.vue'
import ExpertInfo from '../views/ExpertInfo.vue'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },{
    path: '/expertList',
    name: 'ExpertInfo',
    component: ExpertInfo
  },{
    path: '/login',
    name: 'Login',
    component: Login
  },
]

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

export default router

4.main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant';
import 'vant/lib/index.css';
createApp(App).use(router).use(Vant).mount('#app');

5.App.vue

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

6.其他组件中使用router

 methods: {
    onClickRight() {
      this.$router.push('/expertList');
    },
    onClickLeft() {
      this.$router.push('/login')
    },
  },

暂时记到这里，想起来什么了再补充。

标签：vuecli4,vue,记录,Index,ExpertInfo,router,import,Login,路由
来源： https://blog.csdn.net/qq_49879334/article/details/115479213