第一步下载安装
Vue2中安装命令
npm i vue-router@3
vue3中安装命令
npm i vue-router@4
第二步配置路由器
在src下新建router文件夹内建立index.js
如图,我创建了两个组件
在Student.vue 组件中
在Teacher.vue 组件中
组件创建完成,配置路由器
// 创建路由器
// 引入Vue
import Vue from 'vue'
// 引入路由
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)
// 引入组件
import Teacher from '@/components/Teacher'
import Student from '@/components/Student'
// 创建并暴露一个路由
export default new VueRouter({
routes:[
{
path:'/Teacher',
component: Teacher
},
{
path: '/Student',
component: Student
}
]
})
在App.vue 组件中 使用
<template>
<div class="title">
<h1>Vue-Route</h1>
<router-view></router-view>
<router-link active-class="active" to="/Student">学生</router-link>
<router-link active-class="active" to="/Teacher">教师</router-link>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style scoped>
.active {
background-color: tomato;
}
</style>
router-link 切换路径
router-view 组件展示区域
router-link-to to代表跳转的路径
active-class 组件激活时所带类名
以上内容经过学习参考