Vue-Router路由系统

已于 2023-03-17 19:23:40 修改
阅读量425 收藏
点赞数
分类专栏： # 第一章 webpack+vue基础 文章标签： vue.js 前端 javascript
于 2023-03-06 20:13:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gik99/article/details/129368630
版权

Vue-Router路由系统

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

1.1 路由是什么

映射关系

  • node.js中的路由 接口和服务器的映射关系
  • Vue中的路由 路径和组件的映射关系

在这里插入图片描述

1.2 为何使用路由

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

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

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

1.3 Vue中如何实现路由

借助 vue-router(本质上是一个第三方包)

  • 官网 https://router.vuejs.org/zh/

在这里插入图片描述

1.4 组件分类

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

在这里插入图片描述
在这里插入图片描述

1.5 vue-router路由系统使用

步骤 (一切都要以url上hash值为准)

  • 1.下载vue-router模块到当前工程
yarn add vue-router@3.5.3    (下载旧版本匹配vue2)
  • 2.在main.js中引入VueRouter函数
import VueRouter from 'vue-router
  • 3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
Vue.use(VueRouter)
  • 4.创建路由规则数组 – 路径和组件名对应关系
const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配规则
  },
  {
    path: "/find",
    name: "Find",
    component: Find,
  },
  {
    path: "/my",
    name: "My",
    component: My
  },
  {
    path: "/part",
    name: "Part",
    component: Part
  },
  {
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]
  • 5.用规则生成路由对象
const router = new VueRouter({
  routes,// routes是固定key(传入规则数组)
  // mode: "history" // 默认不写是"hash"
})
  • 6.把路由对象注入到new Vue实例中
// 6. 路由对象注入到vue实例中, this可以访问$route和$router
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
  • 7.用router-view作为挂载点, 切换不同的路由页面
<div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
<div class="top">
    <!-- 7. 设置挂载点-当url的hash值路径切换, 显示规则里对应的组件到这 -->
    <router-view></router-view>
  </div>

main.js中完整代码

import Vue from 'vue'
import App from './App.vue'
import Find from '@/views/Find' // @是src的绝对地址
import My from '@/views/My'
import Part from '@/views/Part'
import NotFound from '@/views/NotFound'
// 目标: vue-router基础使用
// 1. 下载vue-router  (yarn add vue-router)
// 2. 引入
import VueRouter from 'vue-router'
// 3. 注册全局组件
Vue.use(VueRouter)
// 4. 规则数组
const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配规则
  },
  {
    path: "/find",
    name: "Find",
    component: Find,
  },
  {
    path: "/my",
    name: "My",
    component: My
  },
  {
    path: "/part",
    name: "Part",
    component: Part
  },
  {
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]
// 5. 生成路由对象
const router = new VueRouter({
  routes,// routes是固定key(传入规则数组)
  // mode: "history" // 默认不写是"hash"
})

Vue.config.productionTip = false

// 6. 路由对象注入到vue实例中, this可以访问$route和$router
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

规则如何生效

  • 切换url上hash值, 开始匹配规则, 对应组件展示到 router-view位置

二、声明式导航

2.1 什么是声明式导航

可以最简单的实现导航选中高亮效果

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

在这里插入图片描述

<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>
// 目标: 声明式导航 - 基础使用
// 本质: vue-router提供的全局组件 "router-link"替代a标签
// 1. router-link 替代a标签
// 2. to属性      替代href属性
// 好处: router-link自带高亮的类名(激活时类名)
// 3. 对激活的类名做出样式的编写
export default {};
</script>

<style scoped>

2.2 声明式导航跳转传参

在跳转路由时, 可以给路由对应的组件内传值

在这里插入图片描述

方法一 ( $route.query)

  • 1.在router-link上的to属性传值 /path?参数名=值
 <router-link to="/part?name=小传">朋友-小传</router-link>
  • 2.对应页面组件接收传递过来的值 $route.query.参数名
 <p>人名: {{ $route.query.name }}  </p>

方法二 ($route.params)

  • 1./path/值 – 需要路由对象(main.js)提前配置 path: “/path/参数名”
//main.js文件
 {
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },

<router-link to="/part/小智">朋友-小智</router-link>
  • 2.对应页面组件接收传递过来的值 $route.params.参数名
 <p>人名{{ $route.params.username }}</p>

三、重定向和模式设置

3.1 重定向

网页第一次打开没有默认页面

匹配path后, 强制跳转path路径

  • 网页打开url默认hash值是/路径
  • redirect是设置要重定向到哪个路由路径
{
    path: '/',//匹配默认hash值路径
    redirect: '/find',//重定向到find  浏览器url中#后的路径被改变成/find-重新匹配规则
  },

3.2 找不到路径提示404页面

路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个

//引入组件
import NotFound from '@/views/NotFound'

// 404必须在最后(规则是从前到后逐个比较)
//规则数组
const routes =[
	....
  {
    path: '*',
    component: NotFound
  }
 ]

3.3 路由模式设置

修改路由在地址栏的模式

  • hash路由例如: http://localhost:8080/#/home
  • history路由例如: http://localhost:8080/home (以后上线需要服务器端支持, 否则找的是文件夹)
const router = new VueRouter({
  //routes时固定的key(传入规则数组)
  routes: routes,
  // mode: 'history',//默认不写是hash值
})

四、编程式导航

4.1 编程式导航-基础使用

用JS代码来进行跳转

  • 语法: path或者name任选一个

在这里插入图片描述

html代码

 <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="btn('/part', 'Part')">朋友-Gik</span>
    </div>
    <div class="top">
      <!-- 7.设置挂载点-当url的hash值路径切换,显示规则里对应的组件到这 -->
      <router-view></router-view>
    </div>

方式一 path跳转

//目标:编程式导航 js方式跳转路由
//语法
//this.$router.push({path:'路由路径'})
//this.$router.push({name:'路由名'})
//场景  方便修改:name路由名(name路由名在页面看不到)
//path看得到
	btn(targetPath, targetName) {
      //方式1 path跳转
      this.$router.push({
         path: targetPath
       }, () => { }, () => { })
    }

方式二 name跳转

btn(targetPath, targetName) {
  //方式二 name跳转 (url地址的hash值还是切换path路劲的值)
  this.$router.push({
    name: targetName
  })
}

4.2 编程式导航 -跳转传参

JS跳转路由, 传参

  • query传, $route.query接
  • params传, $route.params接

在这里插入图片描述

 <template>
    <div>
      <div class="footer_wrap">
        <span @click="onebtn()">朋友-Gik</span>
        <span @click="twobtn()">朋友-99</span>
      </div>
      <div class="top">
        <router-view></router-view>
      </div>
    </div>
  </template>

  <script>
  //目标 编程式导航的 跳转路由传参
  //方式一:
  // params=>$router.params.参数名
  //方式二
  //params=>$router.query.参数名
  //重要 使用path会自动忽略params
  //推荐name+query方式传参
  //注意:如果当前url上的hash值和参数 与 你要跳转的hash值和?参数一致   
  //爆出冗余导航的问题,不会跳转路由
  export default {
    methods: {
      onebtn() {
        this.$router.push({
          name: 'Part',
          params: {
            username: 'params传值'
          }
        }, () => { }, () => { })
      },
      twobtn() {
        this.$router.push({
          name: 'Part',
          query: {
            name: 'query传值'
          }
        })
      }
    }
  };
  </script>

五、嵌套和守卫

5.1 路由嵌套

在现有的一级路由下, 再嵌套二级路由

在这里插入图片描述
在这里插入图片描述

<div>
    <div class="nav_main">
        <router-link to="/find/recommend">推荐</router-link>
        <router-link to="/find/ranking">排行榜</router-link>
        <router-link to="/find/songlist">歌单</router-link>
    </div>

    <div style="1px solid red;">
        <router-view></router-view>
    </div>
</div>

import Vue from 'vue'
import App from './App.vue'
import Find from '@/views/Find' //@时src的绝对地址
import My from '@/views/My'
import Part from '@/views/Part'
import NotFound from '@/views/NotFound'
import Ranking from '@/views/Second/Ranking'
import Recommend from '@/views/Second/Recommend'
import SongList from '@/views/Second/SongList'

//目标 vue-router基础使用
//1.下载vue-router (yarn add vue-router)
//2.引入
import VueRouter from 'vue-router'
//3.注册全局组件
Vue.use(VueRouter)
//4.规则数组 
const routes = [
  {
    path: '/',//匹配默认hash值路径
    redirect: '/find',//重定向到find  浏览器url中#后的路径被改变成/find-重新匹配规则
  },
  {
    path: '/find',
    name: 'Find',
    component: Find,
    children: [
      {
        path: 'ranking',
        component: Ranking,
      },
      {
        path: 'recommend',
        component: Recommend,
      },
      {
        path: 'songlist',
        component: SongList
      }
    ]
  },
  {
    path: '/my',
    name: 'My',
    component: My
  },
  {
    path: '/part',
    name: 'Part',
    component: Part
  },
  {
    path: '/part/:username/:id', //有:的路径代表要接收具体的值
    component: Part
  },
  // 404必须在最后(规则是从前到后逐个比较)

  {
    path: '*',
    component: NotFound
  }
]
//5.生成路由对象
const router = new VueRouter({
  //routes时固定的key(传入规则数组)
  routes: routes,
  // mode: 'history',//默认不写是hash值
})
Vue.config.productionTip = false
//6.路由对象注入到vue实例中 this可以访问$route 和 $router
new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

5.2 声明式导航 – 类名区别

在这里插入图片描述

区别

  • 1.url上的hash值(#/home/recommend) 包含导航的href值(#/home)--当前a就有'router-link-active'(模糊)
  • 2.url上的hash值(#/home/recommend) 等于导航的href值(#/home/recommend)--当前a就有'router-link-exact-active'(精确)

5.3 全局前置守卫

路由跳转之前, 会触发一个函数(未登录不跳转)

  • 语法: router.beforeEach((to, from, next) =>｛｝)
    • 一定next(),才会跳转下一页

main.js 代码

//目标:路由守卫
//场景:当你要对路由权限判断时
//语法:router.beforeEach((to,from,next)=>{
// 路由跳转之前先执行这里   决定是否跳转
// })
//参数1  要跳转到的路由对象信息(目标)
//参数2 从哪里跳转的路由对象信息(来源)
//参数3 函数体-next()才会让路由正常跳转切换
//next(false)原地停留
//next('强制修改到另一个路由路径上')
//注意:如果不调用next(),页面停留在原地

//例子:判断是否登录
const isLogin = true;
router.beforeEach((to, from, next) => {
  console.log(to);
  console.log(from);
  console.log(next);
  if (to.path === '/my' && isLogin === false) {
    alert('请登录')
    next(false) //阻止跳转
  } else {
    next()
  }
})

5.4 全局后置守卫

路由跳转之前, 会触发一个函数

  • 语法 router.afterEach(to,from) 没有next
Gik99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
技术分享 | 测试平台开发-前端开发之Vue router路由设计
hogwarts_2022的博客
04-15 220
这里的路由是指的页面之间的路径管理器，简单的理解为 vue-router 就是链接路径的管理系统。vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。vue-router 就是将组件映射到路由上面。在 vue-router 单页面应用中，是路径之间的切换，也就是组件的切换。 vue router 路由配置 在 Vue 中，路由的配置都是在 router 中的 index.js 中进行的配置。 例如： 首先在 components 创建两个 Vue
ROUTER-OS系统安装及使用（用于自建PPPOE/DHCP上网服务器）
ZH_zh_123的博客
08-14 3546
MikroTik Routers and Wireless - SoftwareWINBOX下载：ROS下载：1.开启VMware workstation 16PRO，点击新建虚拟机，在弹出的向导框中选择自定义，点击下一步；2.虚拟机硬件兼容性界面不做任何修改，直接点击下一步；3.在操作系统选择界面选择安装下载的mikrotik镜像文件，点击下一步按钮；4.客户机操作系统选择其他，对应的版本也选择其他，点击下一步按钮；5.虚拟机名称根据自己喜欢进行编辑，虚拟机文件保存位置默认选择为C盘，可根据实际情况选择空
Vue的路由系统（Vue Router）
00后的一位普通处女座前端程序员
07-26 323
Vue的路由系统（Vue Router）关于Vue RouterVue Router ：Vue中提供制作多页网站效果的技术原生开发中通过切换html文件的方式来实现多页的效果整个网页的切换path的路径必须带”/“(开头）要不然不是一个完整的路径App.vue里面必须要有router router-view view和components path components view router-link，router-view view和components path components view rou
2021-05-25
zhouzhou1994的博客
05-25 130
1，什么是路由 解释路由器的概念，首先得知道什么是路由。所谓“路由”，是指把数据从一个地方传送到另一个地方的行为和动作，而路由器，正是执行这种行为动作的机器，它的英文名称为Router,是一种连接多个网络或网段的网络设备，它能将不同网络或网段之间的数据信息进行“翻译”，以使它们能够相互“读懂”对方的数据，从而构成一个更大的网络。 1.1 为什么使用路由 目标: 在一个页面里, 切换业务场景 优点： 整体不刷新页面，用户体验更好 数据传递容易, 开发效率高 缺点： ...
vueX+vue-router信息管理系统
_小郑有点困了的博客
03-04 496
vueX+vue-router信息管理系统 利用vueX进行数据存储状态管理，路由跳转页面，如果用路由传值，会出现传值无法保存， 所以用vueX 效果图： 1： 2： store内代码： 添加数据： 数据列表： app.vue: router路由配置: ...
vue3+webpack+vue-router路由封装+axios封装+vuex封装
05-23
vue3+webpack+vue-router路由封装+axios封装+vuex封装，下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码，分别对vue-router路由进行了封装，对axios进行了封装，对vuex进行了封装，...
解决vue-router 嵌套路由没反应的问题
10-14
const router = new VueRouter({ mode: 'history', routes: [ { path: '/recom', component: Recom, // 假设Recom是父组件 children: [ { path: 'view', name: 'recomView', component: recomView }, { path...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-router路由系统介绍
tjx11111的博客
03-28 791
路由原理 传统开发方式 url改变后 立刻发起请求，响应整个页面，渲染整个页面 SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据 页面不跳转 用户体验更好 SPA single page application(单页应用程序) 前端路由 锚点值监视 ajax获取动态数据 核心点是锚点值 前端框架 Vue/angular/react都很适合开发单页应用 基本使用...
Vue知识点整理（六）- vue-router（1）- 路由简介、路由基本使用、嵌套路由
JHY97的博客
04-26 587
一、路由简介 1.1 vue-router 的理解 vue的一个插件库，专门用来实现SPA应用 介绍 | Vue Router (vuejs.org)https://router.vuejs.org/zh/introduction.html 1.2 对SPA应用的理解 单页面Web应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面，只会做页面的局部更新 数据需要通过ajax请求获取 1.3 路由的理解 1.3
Vue3后台管理系统（十九）路由vue-router
Good Luck
02-25 5322
Vue3后台管理系统（十九）路由vue-router
路由器操作系统
Finit的成长空间
10-06 8286
参考链接：https://www.leiphone.com/news/201406/luyouqi-caozuoxitong.html
超全详解vue-router路由
是阿瑶的博客呀~
11-06 2008
1. 什么是路由? 路由就是路径和组件的映射关系 1.1 为什么使用路由? -->在一个页面里, 切换业务场景 单页面应用(SPA): 所有功能在一个html页面上实现 前端路由作用: 实现业务场景切换 1.2 路由 - 组件分类 .vue文件分2类, 一个是页面组件, 一个是复用组件 .vue文件本质无区别, 方便学习和理解, 总结的一个经验 src/views(或pages) 文件夹 和 src/components文件夹 页面组件 - 页面展示 - 配合路由用 ..
vue中vue-route
Cherries_h的博客
05-02 1万+
Vue路由是指：根据不同地址，创造不同页面。如单页面应用，不刷新整个页面，不频繁请求，请求数据，通过js操作（ajax），如：切换两个不同图片，不同地址，只需第一次需要请求，第2次共用请求资源，只需再请求一张图片即可vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起...
使用 Vue + ElementUI + Webpack + VueRouter 做后台管理、RESTful 交互
热门推荐
IT小村
08-25 4万+
一、前言 前端三大 JS 框架 Vue、React、Angular 都用了一段时间了，最后还是回归于 Vue JS demo Vue [增删改查] 使用 Vue2.x + LayUI 做后台管理 CRUD 界面和 REST 交互 React [增删改查] 使用 React + LayUI 做后台管理 CRUD 界面和 RESTful 交互 An...
我的vue学习日记（一）——后台管理系统（vue+vuex+axios+iview+router）
你好！刘斩仙
08-01 8523
效果如图： 介绍： 1.创建vue项目 //桌面打开命令窗口 npm和cnpm都行，建议cnpm快很多，还不容易出错（前提是你安装了淘宝镜像cnpm） cnpm install -g vue-cli //建好了，cd..到work文件夹（我的是work） vue init webpack Vue-Project //Vue-Project是项目名字（work文件夹下执行） ...
vue解决页面放大图片模糊的问题
最新发布
m0_56104994的博客
07-12 319
解决页面放大，图片模糊的问题
vue-router路由执行流程
05-27
Vue-Router是Vue.js官方提供的路由管理器，它可以方便地实现前端...总的来说，Vue-Router的路由执行流程就是：创建VueRouter实例 -> 配置路由规则 -> 注入VueRouter实例 -> 使用路由组件 -> 跳转路由 -> 路由导航守卫。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gik99

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值