vue 中的路由

大帅子
151 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。

大家好,我是大帅子,今天给大家讲一下vuex吧,下面我们直接开始吧

image.png

1.路由-是什么

路由是一种映射关系

vue中的路由是路径跟组件之间的映射关系

image.png

2. 为什么要用路由

讲解

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

具体使用示例: 网易云音乐 music.163.com/

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

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

优点：

  • 整体不刷新页面，用户体验更好
  • 数据传递容易, 开发效率高

缺点：

  • 开发成本高(需要学习专门知识)
  • 首次加载会比较慢一点。不利于seo

3. vue-router 的官网

官网: router.vuejs.org/zh/

4. 使用vue-router

讲解

App.vue - 页面标签和样式准备(==可复制继续写==)

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      
    </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>

vue-router文档

  • 安装
yarn add vue-router
  • 导入路由
import VueRouter from 'vue-router'
  • 使用路由插件
// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)
  • 创建路由规则数组
const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]
  • 创建路由对象 - 传入规则
const router = new VueRouter({
  routes
})
  • 关联到vue实例
new Vue({
  router
})
  • components换成router-view
<router-view></router-view>

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

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

5.Vue路由-声明式导航-跳转

目标

可用全局组件router-link来替代a标签

讲解

  1. vue-router提供了一个全局组件 router-link
  2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
  3. router-link提供了声明式导航高亮的功能(自带类名)
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
​
<script>
export default {};
</script>
​
<style scoped>
/* 省略了 其他样式 */
.footer_wrap .router-link-active{
  color: white;
  background: black;
}
</style>

总结: 链接导航, 用router-link配合to, 实现点击切换路由

6.Vue路由-声明式导航-传参

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

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

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

  • $route.query.参数名
  • $route.params.参数名

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

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

  2. 路由定义

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

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

    <router-link to="/part?name=小传">朋友-小传</router-link>
<router-link to="/part/小智">朋友-小智</router-link>

总结:

?key=value 用$route.query.key 取值

/值 提前在路由规则/path/:key 用$route.params.key 取值

7.Vue路由-404页面

目标

目标: 如果路由hash值, 没有和数组里规则匹配

讲解

默认给一个404页面

语法: 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面

  1. 创建NotFound页面

    <template>
  <img src="../assets/404.png" alt="">
</template>
​
<script>
export default {
​
}
</script>
​
<style scoped>
    img{
        width: 100%;
    }
</style>

  2. 在main.js - 修改路由配置

    import NotFound from '@/views/NotFound'
​
const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]

总结: 如果路由未命中任何规则, 给出一个兜底的404页面

8. ## Vue路由-模式设置

router/index.js

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})

9. Vue路由-编程式导航-跳转

语法:

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

main.js - 路由数组里, 给路由起名字

{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},
  1. App.vue - 换成span 配合js的编程式导航跳转
<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="btn('/part', 'Part')">朋友</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
​
<script>
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    }
  }
};
</script>

10.二级路由

const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅        还需努力!大家一起进步!!!
avatar
文章
阅读
粉丝