路由学习笔记

1.什么是路由?

根据不同的用户事件显示不同的页面内容

2.为什么使用路由?

目标: 在一个页面里, 切换业务场景

前端路由的作用:实现业务场景切换

优点：

• 整体不刷新页面，用户体验更好

• 数据传递容易, 开发效率高

缺点：

• 开发成本高(需要学习专门知识)

• 首次加载会比较慢一点。不利于seo

Vue Router

是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。包含如下几种功能：

• 支持HTML5历史模式和hash模式

• 支持嵌套路由

• 支持路由参数

• 支持编程式路由

• 支持命名路由

3.vue Router组件分类

分为页面组件和复用组件

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

4.vue 创建路由的过程：

​
1.安装路由依赖包---vue-router
    1.1 ----创建vue项目时，直接选择vue-router安装路由
    1.2 ---- npm 安装-----npm install vue-router 
    1.3 main.js引入路由插件
    import VueRouter from 'vue-router'
    1.4 全局使用路由插件
    const app = createApp(App);
    app.use(VueRouter)
​
2.router/index.js导入路由依赖包
    import { createRouter, createWebHashHistory } from 'vue-router'
​
3.配置路由---核心----router/index.js 文件
const routes = [
  {
    path: '路由路径',
    name: '路由名称',
    component: 路径对象对应的组件对象
  }
]
​
4.创建路由对象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
​
5.抛出路由器对象
export default router
​
​
6.main.js导入路由配置文件index.js
//import router from './router/index.js'
import router from './router'
​
6.挂载路由对象---use(router)
createApp(App).use(router).mount('#app')
​
7.改造a标签实现， 路由导航跳转(app.vue中)
 <router-link href="/find">发现音乐</router-link>
​
8.显示对象路由地址的组件对象
<router-view></router-view>

5.路由的声明式导航:

目标是用全局组件router-link代替a标签

router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

template>
    <div class="foot">
    <router-link to="/Find"> 发现音乐</router-link>
    <router-link to="/my">我的音乐</router-link>
    <router-link to="/Friend">朋友</router-link>
    
    <router-view></router-view> 
    </div>
</template>
​
<script>
import computed from 'vue';
export default {}
</script>
​
<style scoped>
.foot .router-link-active{
    color: aliceblue;
    background-color: blue;
}
</style>

路由的跳转传参:

在router-link上的to属性传值, 语法格式如下

• /path?参数名=值

• /path/值 – 需要路由对象提前配置 path: “/path/:参数名”

对应页面组件接收传递过来的值

• $route.query.参数名

• $route.params.参数名

1.创建components/Friend.vue - 准备接收路由上传递的参数和值

<template>
  <div>
      <p>关注音乐</p>
      <p>发现精彩</p>
      <p>寻找伙伴</p>
      <p>加入我们</p>
      <p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p>
  </div>
</template>

2.路由定义:

{
    path: "/friend",
    component:Friend
  },
  {
    path: "/friend/:username", // 有:的路径代表要接收具体的值
    component: Friend
  },

3.导航跳转, 传值给Friend.vue组件

<router-link to="/friend?name=小白">朋友-小黑</router-link>
<router-link to="/friend/小黑">朋友-小白</router-link>

总结:

//方式1:
to="/path?参数名=值"
接收 $route.query.参数名
​
//方式2:
(1) 路由规则path上定义/path/:参数名
(2) to="/path/值"
接收 $route.params.参数名