路由的使用(5+2)
路由基本步骤
在main文件下完成以下步骤
// 1. 安装vue-router 终端输入:
npm install vue - router@3.6.5
// 2. 引入
import VueRouter from 'vue-router'
// 3. 安装注册 Vue.use(Vue插件)
Vue.use(VueRouter) //VueRouter插件的初始化
// 4. 创建路由对象
const router = new VueRouter() //router不要乱写
// 5. 注入到new Vue中,建立关联
new Vue({
render: h => h(App),
router //只要添加这
}).$mount('#app')
路由核心步骤
1. 创建需要的组件(src/views目录)
几个页面之间的切换,就创建几个页面组件
// 建立组件时,使用大驼峰写法,或者name一个新的名字
export default {
name: "FriendMusic",
};
2. 配置路由规则 main.js
// 引入路由模块,例如下:
import Find from './views/Find.vue';
import Friend from './views/Friend.vue';
import Friend from './views/Friend.vue';
const router = new VueRouter({
routes: [
// {path: '地址栏路径',component:组件名}, 例如下:
{ path: '/find', component: Find },
{ path: '/my', component: My },
{ path: '/friend', component: Friend },
]
})
3.配置导航,配置路由出口(路径匹配组件显示的位置) App.vue
<template>
<div>
<div class="fb">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div>
<!-- 路由出口 => 展示对应的页面组件 -->
<router-view></router-view>
</div>
</div>
</template>