首先安装路由npm install vue-router安装完成后,在项目中新建一个router文件夹,一个index.js index.js 中写入 import { createRouter, createWebHashHistory } from vue-routerimport Index from ../views...
- 首先安装路由
npm install vue-router
-
安装完成后,在项目中新建一个router文件夹,一个index.js
-
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配置路由 简单记录一下
基础教程推荐
猜你喜欢
- Ajax+smarty技术实现无刷新分页 2022-12-15
- Ajax发送和接收请求 2022-12-15
- cocos creator游戏实现loading加载页面,游戏启动加载动画 2022-10-29
- Javascript Bootstrap的网格系统,导航栏和轮播详解 2023-08-11
- 在实战中可能碰到的几种ajax请求方法详解 2023-02-01
- HTML clearfix清除浮动讲解 2022-11-20
- 使用ajax跨域调用springboot框架的api传输文件 2023-02-23
- JS滚动到顶部踩坑解决记录 2023-07-10
- 关于Ajax跨域问题及解决方案详析 2023-02-23
- uniapp开发微信小程序自定义顶部导航栏功能实例 2022-10-21