Vue-路由系统

一.Vue路由简介和基础使用

1.简介:

• nodejs路由 : 接口和服务的映射关系
• 前端路由 : 路径和组件的映射关系

2.路由作用:

• 单页面应用(SPA): 所有功能在一个html页面上实现

• 前端

  路由作用

  实现业务场景切换

  • 优点
    • 整体不刷新页面，用户体验更好
    • 数据传递容易, 开发效率高
  • 缺点
    • 开发成本高(需要学习专门知识)
    • 首次加载会比较慢一点。不利于seo

3.vue-router介绍:

如何在Vue项目中集成路由

官网: router.vuejs.org/zh/

• vue-router模块包
• 它和 Vue.js 深度集成
• 可以定义 - 视图表(映射规则)
• 模块化的
• 提供2个内置全局组件
• 声明式导航自动激活的 CSS class 的链接

4.组件分类:

vue文件分2类, 一个是页面组件, 一个是复用组件

• .vue文件本质无区别, 方便大家学习和理解, 总结的一个经验
• src/views(或pages) 文件夹 和 src/components文件夹
  • 页面组件 - 配合路由, 切换页面
  • 复用组件 - 用来重复渲染结构一样的标签

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

5.vue-router使用:

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

官网: router.vuejs.org/zh/

步骤：

• 下载vue-router模块到当前工程

  npm i vue-router@3
  

• 在main.js中引入VueRouter函数

  import VueRouter from 'vue-router'
  

• 添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件

  Vue.use(VueRouter)
  

• 引入组件

  import Find from '@/views/Find.vue'
  import My from "@/views/My.vue"
  import Part from "@/views/part.vue"
  

• 创建路由规则数组 – 路径和组件名对应关系

  const routes = [
    {
       
      path: "/find",
      component: Find
    },
    {
       
      path: "/my",
      component: My
    },
    {
       
      path: "/part",
      component: Part
    }
  ]
  

• 创建路由对象 - 传入规则

  const router = new VueRouter({
       
    routes
  })
  

• 把路由对象注入到new Vue实例中

  new Vue({
       
    //挂载到 new Vue 根实例上
    router,
    render: h => h(App),
  }).$mount('#app')
  

• 用router-view作为挂载点, 切换不同的路由页面

  <router-view></router-view>
  

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

一切都围绕着hash值变化为准

二.声明式导航

1.基础使用：

• vue-router提供了一个全局组件 router-link
• router-link实质上最终会渲染成a链接 to属性等价于提供 href属性**(to无需#**)
• router-link提供了声明式导航高亮的功能(自带类名)

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>