1.什么是路由呢?
路由就是路径和组件之间的映射关系,当我们路径变化的时候,就要切换对应的组件。
在前端中解决路径与组件之间的映射关系,官方提供了VueRouter这个插件
2.VueRouter的作用及使用
作用:修改地址栏路径时,切换显示匹配的组件
VueRouter的使用分为5个步骤和特定的2步
3.下面是固定的5步:
1.下载相关插件VueRouter(本次用的都是Vue2)
使用下方命令:
npm i vue-router@3.6.5
当然 如果你曾经下载过yarn,也可以用下方命令
yarn add vue-router@3.6.5
2.引入(下面的都是在main.js中使用)
import VueRouter from 'vue-router'
3.全局安装注册
Vue.use(VueRouter)
4.创建路由对象
const router=new VueRouter()
5.注入,将路由对象注入到new Vue实例中,建立联系(这里使用简写)
new Vue({
render: h => h(App),
router
}).$mount('#app')
4.下面的是自定义的两步,也是核心的两步
1.创建需要的组件(在views目录中),配置路由规则
这里有一个注意点:
为了防止命名规则报错,添加了name
在main.js中配置规则
import Vue from 'vue'
import App from './App.vue'
import Find from './components/views/Find.vue'
import Friend from './components/views/Friend.vue'
import My from './components/views/My.vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
const router=new VueRouter({
//route是路径的意思,routes这里表示的是很多的路由规则
//每一个路由规则都是一个对象,{path:路径,component:组件}
//两个核心配置:path和 component,必填项
routes:[
{path:'/find',component:Find},
{path:'/friend',component:Friend},
{path:'/my',component:My},
]
})
new Vue({
render: h => h(App),
router
}).$mount('#app')
2.配置导航,配置路由出口(配置匹配的组件显示位置)
<template>
<div>
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<!-- 路由出口 → 匹配的组件所展示的位置 -->
<!-- 这个router-view也是内置的,相当于占位符 -->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {};
</script>
<style>
body {
margin: 0;
padding: 0;
}
.footer_wrap {
position: relative;
left: 0;
top: 0;
display: flex;
width: 100%;
text-align: center;
background-color: #333;
color: #ccc;
}
.footer_wrap a {
flex: 1;
text-decoration: none;
padding: 20px 0;
line-height: 20px;
background-color: #333;
color: #ccc;
border: 1px solid black;
}
.footer_wrap a:hover {
background-color: #555;
}
</style>
效果图