vuecli4配置路由 简单记录一下

本文主要是介绍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配置路由 简单记录一下的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！