vue-router

官网: Vue Route 。vue-router模块包 和 Vue.js 深度集成Vue Router

• 组件分类.vue 文件本质无区别, 方便大家学习和理解, 总结的一个经验

  • 页面组件 - 页面展示 - 配合路由用 src/views(或pages)

  • 复用组件 - 展示数据/常用于复用 src/components文件夹

总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据

目标: 学会vue官方提供的vue-router路由系统功能模块使用

App.vue - 页面标签和样式准备

vue-router文档

安装

npm i vue-router@3.5.1

main.js 入口：需要配置下

import VueRouter from 'vue-router'

// 在vue中，使用使用vue的插件，都需要调用Vue.use()  使用路由插件
Vue.use(VueRouter);

// main.js 内部  需要导入 这些个组件 Find My Part
import Find from "./views/Find.vue"

// 创建路由对象 -  传入规则
const router = new VueRouter({
    routes:[
        {
            path: "/find",   // 
            component: Find
        },
        {
            path: "/my",
            component: My
        },
        {
            path: "/part",
            component: Part
        }
    ]
})

// 关联到vue实例
new Vue({
  router:router,
  render: h => h(App),
}).$mount('#app')

---

App.vue组件内：

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.footer_wrap {
  position: fixed;
  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;
}
.top {
  padding-top: 62px;
}
</style>

---

总结1: 下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由

总结2: 一切都围绕着hash值变化为准