Vue全家桶系列之Vue-router(三)

最新推荐文章于 2023-04-04 17:29:43 发布
最新推荐文章于 2023-04-04 17:29:43 发布
阅读量4.1k 收藏
点赞数 2
分类专栏： vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws9029/article/details/120146946
版权

文章目录

1.前言

上篇文章说了vue-router的基本使用，接下来看下其他的使用方法

2.路由的重定向

还是拿之前的例子，有3个页面（home,about,help）

在这里插入图片描述
如果都没有匹配上，那怎么办？我可以让它重定向home页面，这里重定向有多种写法，还是修改router中index.js。

2.1字符串重定向

redirect后面接的是一个path字符串

// router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/help',
      name: 'help',
      component: Help
    },
    {
      path: '*',
      redirect: '/home'  //重定向到'/home'
    }
  ]
})
2.2对象重定向

redirect后面接的是一个包含path的对象或者name的对象

// router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/help',
      name: 'help',
      component: Help
    },
    {
      path: '*',
      // redirect: {path: "/home"}  两种写法都可以
      redirect: {name: "home"}
    }
  ]
})

这里有两种写法，一种是包含path的对象，一种是包含name的对象，之前上篇文章提到过这个name,name就是路由的名称，其实就告诉路由匹配到name为home的路由！

2.3函数重定向

动态设置重定向目标

// router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/help',
      name: 'help',
      component: Help
    },
    {
      path: '*',
      // redirect: {path: "/home"}  两种写法都可以
      redirect: {name: "home"}
    }
  ]
})

输入'http://localhost:8080/123'来打印看下to这个对象如下：
在这里插入图片描述
这里可以看到fullPath，hash,params,path,query,这里我们可以用path来做个判断，其他的属性以后会说到（先不用去理解）！

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/help',
      name: 'help',
      component: Help
    },
    {
      path: '*',
      redirect: (to) => {
        if (to.path === '/123') {
          return '/home'
        } else if (to.path === '/456') {
          return {path: '/about'}
        } else {
          return {name: 'help'}
        }
      }
    }
  ]
})

看下面执行结果：
在这里插入图片描述

3.路由的别名

就是给路由设置一个另外的名字，比如输入'http://localhost:8080/123'，我还想跳到help这个页面，就可以把help路由设置一个别名叫做'/123'！

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/help',
      name: 'help',
      alias: "/123",
      component: Help
    }
  ]
})

看下图，输入'http://localhost:8080/123'直接跳转到help路由
在这里插入图片描述

4.设置全局和局部激活class

在这里插入图片描述
当点击路由切换的后，可以看到当前激活的路由会有个激活的'router-link-active' class类名，你可以为激活的路由设置样式，如果你不想用这个类名，想自己设置个自己喜欢的类名也是可以的，只需要在路由配置里面设置linkActiveClass属性,下面我把它设置为'active'

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  linkActiveClass: "active",
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/help',
      name: 'help',
      alias: "/123",
      component: Help
    }
  ]
})

再来设置样式，当激活时背景色为黄色！
在这里插入图片描述
如果不想每个颜色都一样，也可以为每个路由单独设置局部'active-class'类名，about被激活设置粉色，help被激活设置天蓝色，修改App.vue如下

<template>
  <div class="router-class">
    <router-link to="/home">home页面</router-link>
    <router-link to="/about" active-class="about-router">about页面</router-link>
    <router-link to="/help" active-class="help-router">help页面</router-link>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>

.active{
  background-color: yellow;
}
.about-router{
  background-color: pink;
}
.help-router{
  background-color: skyblue;
}
</style>

在这里插入图片描述

5.路由嵌套

先对之前的路由做下修改，在根目录下就展示home路由，并且是激活状态，那么这里就需要修改下路由配置,

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  linkActiveClass: "active",
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/help',
      name: 'help',
      alias: "/123",
      component: Help
    }
  ]
})

router-link里面也需要把path的路径改成根路径！

<template>
  <div class="router-class">
    <router-link to="/" >home页面</router-link>
    <router-link to="/about" active-class="about-router" >about页面</router-link>
    <router-link to="/help" active-class="help-router">help页面</router-link>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>

.active{
  background-color: yellow;
}
.about-router{
  background-color: pink;
}
.help-router{
  background-color: skyblue;
}
</style>

看下执行效果！
在这里插入图片描述
发现样式有问题，home的激活状态不会消失，为啥？是因为path匹配的是'/'根目录，那么它也会匹配到'/about','/help',所以需要准确匹配，需要加上一个exact属性

<template>
  <div class="router-class">
    <router-link to="/" exact>home页面</router-link>
    <router-link to="/about" active-class="about-router" >about页面</router-link>
    <router-link to="/help" active-class="help-router">help页面</router-link>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style>

.active{
  background-color: yellow;
}
.about-router{
  background-color: pink;
}
.help-router{
  background-color: skyblue;
}
</style>

在这里插入图片描述
接下来我们在about路由下在嵌套3个路由，分别是work页面，company页面，contactUs页面,并且在父路由about下面 work页面是激活状态，看下面效果！
在这里插入图片描述
那么首先我们需要创建3个组件，并且通过path匹配，因为是about的子路由，所以需要在about路由创建子路由,并且子路由的path不需要加上'/',加上的话就匹配根路径了！

import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/About'
import Help from '@/components/Help'
import Home from '@/components/Home'
import Work from '@/components/Work'
import Company from '@/components/Company'
import ContactUs from '@/components/ContactUs'
Vue.use(Router)

export default new Router({
  linkActiveClass: "active",
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      children: [
        {
          path: '',
          name: 'Work',
          component: Work
        },
        {
          path: 'company',
          name: 'company',
          component: Company
        },
        {
          path: 'contactUs',
          name: 'contactUs',
          component: ContactUs
        }
      ]
    },
    {
      path: '/help',
      name: 'help',
      alias: "/123",
      component: Help
    }
  ]
})

修改了路由配置，还要修改下about.vue的router-link的路径,这里和上面一样也需要准确匹配！还需要添加 < router-view > ，因为它是组件渲染的占位符！

<template>
 <div>
   <p>about</p>
   <router-link to="/about" exact>work页面</router-link>
   <router-link to="/about/company" >company页面</router-link>
   <router-link to="/about/contactUs" >contactUs页面</router-link>
   <router-view></router-view>
 </div>
</template>

<script>
export default {
 name: "About"
}

6.命名路由

其实上面路由的重定向有提到过路由的命名，其实就是在 routes 配置中给某个路由设置名称，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。比如上面的< router-link >里面是提供完整的path,也可以直接用命名路由来代替，看下面代码

<template>
  <div>
    <p>about</p>
    <router-link :to="{name:'work'}" exact>work页面</router-link>
    <router-link :to="{name:'company'}">company页面</router-link>
    <router-link :to="{name:'contactUs'}">contactUs页面</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "About"
}

通过绑定命名路由也可以达到一样的效果！
在这里插入图片描述

世态炎凉！！
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue.js 2.0之全家桶系列视频课程
06-30
多面讲解Vue.js全家桶（vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等） 课程内容包含：1. 数据绑定、模板、指令、过滤器、vue生命周期及实例的属性和方法 2. 组件及组件间的通信、发送HTTP...
Vue全家桶(vue-router+vuex)
06-21
其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现...
vue全家桶
2303_76218115的博客
03-26 1319
Vue脚手架、Vuex、Vue-router和Axios是Vue.js的核心工具，它们分别提供了一套完整的开发环境、状态管理、路由管理和网络请求。在本篇博客中，我们介绍了它们的使用方式、实际应用场景以及底层实现原理。希望本篇博客能够对大家有所启发，为大家的Vue开发之路提供帮助。
Vue Router系列之 base 配置项解释
老__L的博客
02-21 1万+
base 配置项解释
Vue3 知识大总结（四）Vue3 全家桶 router 和 axios
weixin_42771853的博客
04-04 1472
pinia是一个用于对状态进行管理的库，跨组件跨页面对状态进行共享与vuex和redux在作用上并无区别核心区别pinia没有mutations选项，因为mutations的出现解决的问题是让devtools进行状态追踪我们可以在任意组件中拿到store然后直接修改state中的任意值不再需要modules这样的嵌套结构，取而代之的是可以创建一个个store可以在一个组件中拿任意数量的store除此之外你还可以在某个store中拿另外的store，然后使用store中的任何东西。
Vue 全家桶介绍
热门推荐
莫莫博客
01-10 10万+
Vue 全家桶介绍 Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。 概括起来就是...
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue系列之requireJs中引入vue-router的方法
10-18
主要介绍了vue系列之requireJs中引入vue-router的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue2教程详解八（路由vue-router3）
一只努力搬砖的打工妹纸
03-19 3153
目录 简介 安装与基本使用 路由器的工作模式 嵌套路由 params传参和query传参 query传参 params传参 命名路由 路由组件传参（props配置） 对象模式 布尔模式 函数模式 router-link的replace属性 编程式路由/导航 缓存路由组件 路由守卫/导航守卫 全局守卫 独享守卫 组件内守卫 路由元信息 完整的导航解析流程 简介 Vue-router是vue的一个插件库，专门用来实现SPA（single page web app
VueRouter源码分析
YunWisdom
07-19 404
VueRouter源码分析 感谢 funfish,玩弄心里的鬼,Vue.js 技术揭秘的文章，对我的帮助 前言 vue-router的源码不算很多, 但是内容也不算少。本文谈不上逐行分析, 但是会尽量详尽的说明主流程和原理。对一些工具函数和边缘条件的处理会略过，因为我也没有逐行去了解它们，请见谅。 前置基础知识 我们在学习VueRouter源码前，先来复习下hash以及histroy相关的知识。更多细节请参考mdn文档，本节内容节选自mdn文档。 hash onhashchan...
vue 进级篇 router 各种重点
weixin_42946929的博客
08-29 955
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;vue路由的配置是在 vue-cli的环境下进行的。 vue-router是一个插件包，可以用npm来进行安装的。 npm install vue-router --save 我们一般会在src下新建router文件夹，在router中新建index.js文件。用以专门处理路由信息。（当然cli-已经帮我们做好了这一...
v-cli.流程及常见的一些问题
thinkingw770s的博客
08-20 2089
vue-cli（vue脚手架）超详细教程       都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确...
vue-router的使用及实现原理
caoxinhui521的博客
08-29 6万+
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航 2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路
Vue路由（vue-router）详细讲解指南
whicce的博客
11-28 2386
Vue路由（vue-router）详细讲解指南动态路由匹配：嵌套路由：路由导航两种方式： 转自：有梦想的咸鱼前端 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）：...
Vue全家桶原理剖析之Vue-router篇
星海拾遗
05-26 329
Vue-router原理剖析从入门到放弃第一个问题 由于此文主要为介绍Vue-router的原理，就不赘述router的基本用法啦。 第一个问题 vue-router是一个插件，包括在使用Vue-cli创建一个Vue项目的过程中，都可以选择当前项目使用或者不使用Vue-router，但是在任何一个使用l路由管理的Vue项目中，在main.js都可以看到如下代码。 new Vue({ router, render: h => h(App) }).$mount('#app') 那么问题来了， 为
Vue全家桶——Vue Router路由简单用法（二）
weixin_52889573的博客
12-01 79
上篇博文讲了Vue Router的一些简单介绍用法，接下来我们继续深入了解一下。 ** 1.动态匹配路由 ** 我们在调用ajax接口的时候附带值的情况很多，那么路由也可以附带一些值         1.1通过$ route.params.id < router-link to="/user/1">user< /router-link> var User = { template:"< div&gt
vue2使用哪个版本的vue-router
最新发布
05-04
在使用Vue2时，可以使用vue-router的2.x版本，该版本代码库中的文件名应为vue-router.min.js。可以通过以下方式安装vue-router: ```bash npm install vue-router@2.x --save ``` 然后在Vue应用程序中引入： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ // 配置路由规则 }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 在Vue应用程序中使用vue-router时，需要注意Vue和vue-router的版本兼容性。Vue2.x与vue-router2.x兼容，Vue3.x与vue-router4.x兼容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值