在vue实战中认识的vue-router

初衷

最近想尝试一下vue框架的使用,但是没有足够的时候一点点去看它的具体使用,就找了一个实战的网课看了一下,主要是vue2+vant,并跟着做了一遍,vue和angular相似的地方还是比较多的,具体的使用我也不打算记录了,简单的记录一下vue-router的配置吧~(主要是肉体可知的记忆力在下降,不得不进行烂笔头行动😭)

vue-router的安装

npm install vue-router --save-dev

项目结构目录中路由文件的介绍

image

我们使用vue-cli生成我们的项目结构,src/router/index.js文件就是路由的核心文件,我们来简单看一下这个文件是怎么样统筹整个项目路由的~
image

通过这些路由的配置我们就可以通过http://localhost:8080/#/registerhttp://localhost:8080/#/login分别访问到注册和登录页面啦~

使用<router-link>标签来制作导航

<template>
  <div id="app">
    // 模板插入位置
    <router-view/>
  </div>
</template>

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

<style>
#app {
  background-color: #fefefe;
}
</style>

// 1.像普通a标签一样进行路由的跳转
  <p>导航 :
   <router-link to="/">首页</router-link>
   <router-link to="/register">注册页面</router-link>
  </p>

// 2.业务逻辑代码中,可以通过使用编程式路由进行跳转
    this.$router.push('/register')

vue-router配置子路由

使用场景

其实在日常开发中配置子路由是很常见的一种情况,当某个页面隶属于某个模板的时候我们就需要配置子路由了~
以我最近实战的项目为例子,我希望在首页上有个可以切换不同内容的footer组件,这些切换的内容就是作为首页的子路由,


image

我们来看一下相关代码的配置:

import Vue from 'vue'
import Router from 'vue-router'
import ShoppingMall from '@/components/pages/ShoppingMall' // @符号就是表示src
import  Register from '@/components/pages/Register'
import Login from '@/components/pages/Login'
import Goods from '@/components/pages/Goods'
import CategoryList from '@/components/pages/CategoryList'
import Cart from '@/components/pages/Cart'
import Member from '@/components/pages/Member'
import Main from '@/components/pages/Main'

Vue.use(Router)

export default new Router({
routes: [
  {
    path: '/',
    name: 'Main',
    component: Main,
    // 这里的子路由会加载到父组件main的router插槽中
    children: [            //children组件就是专门来配置子路由的啦
      {
        path: '/',
        name: 'ShoppingMall',
        component: ShoppingMall
      },
      {
        path: '/categoryList',
        name: 'CategoryList',
        component: CategoryList
      },
      {
        path: '/cart',
        name: 'Cart',
        component: Cart
      },
      {
        path: '/member',
        name: 'Member',
        component: Member
      }
    ]
  },
  // 这里的路由会加载到app中的router插槽中
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/goods',
    name: 'Goods',
    component: Goods
  },
]
})

vue-router的参数传递

参数传递同样是一个很基本的业务,日常开发中页面的跳转,通过Url传参,大家在实际使用中也是经常碰到的吧~ 我们来看看vue提供几种路由传参的形式~

通过name传递参数

1.路由配置
routes: [
  {
    path: '/',
    name: 'Register',   // 配置name属性
    component: Register
  }
]

2.页面获取
<p>{{ $route.name }}</p> // 通过$route.name进行接收

通过<router-link>标签中的to传参

其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要注意的是这里的to要进行一个绑定,写成:to

1.标签上直接设置
<router-link :to="{name:'Register',params:{key:value}}">value</router-link>

2.页面获取
<p>{{$route.params.username}}</p> // 在使用的模板中接收

name:就是我们在路由配置文件中起的name值。
params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

通过url进行传参

:冒号的形式传递参数
1. 路径上设置
 {
   path:'/params/:newsId/:newsTitle',
   component:Params
 }

2.页面上传入相关参数
<router-link to="/params/168/set params">params</router-link>

3.页面获取
<template>
  <div>
      <h2>{{ msg }}</h2>
      <p>新闻ID:{{ $route.params.newsId}}</p>
      <p>新闻标题:{{ $route.params.newsTitle}}</p>
  </div>
</template>
编程式导航的params进行参数的传递
1. 在函数中传入参数(2种形式)
  1.1 this.$router.push({name: 'Goods', params:{goodsId: id}}) //使用name就得用户编程式导航的params进行参数的传递
  1.2 this.$router.push({path:'/Goods', query: {goodsId: this.goodsId}}) // 如果使用的时候path: /goods则使用的就是query 


2.接收的地方(一般是在created生命周期函数里,根据传入的形式不同,获取也是不同的)
this.goodsId = this.$route.query.goodsId ?  this.$route.query.goodsId :  this.$route.params.goodsId

单页面多路由区域的操作

这种就是在一个页面上,有多个路由区域,我们直接通过截图,看看相关代码


image

路由的配置


image

vue-router的重定向

当我们在开发中,设置的路径不一样,却希望跳转的页面是相同的,这个时候我们就需要使用路由重定向了

基本重定向

  //  只需要将原来的component换成redirect参数
  export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/register',
      component:Register
    },{
      path:'/goback',  // 直接redirect到path:’/’路径下
      redirect:'/'
    }

  ]
})

重定向时传递参数

// 只需要在redirect后边的参数里复制重定向路径的path参数就可以
export default new Router({
routes: [
      {
        path: '/',
        component: Hello
      },{
      // Vue的是支持在路径中使用正则表达式的,我们只需要用()进行包裹,这里就表示只能使用户数字类型的Id
        path:'/params/:newsId(\\d+)',
        component:Params
      },{
        path:'/goParams/:newsId(\\d+)',
        redirect:'/params/:newsId(\\d+)'
      }
]
})

路由别名alias

使用alias别名的形式,我们也可以实现类似重定向的效果。

1. 配置
{
  path: '/menu',
  component: Menu,
  alias:'/list'   // 页面显示的路径仍然是/list 但是UI加载是是menu组件
}

2.使用
 <router-link to="/list">jspang</router-link>

redirect和alias的区别

redirect:redirect是直接改变了用户输入的url的值,把url变成了真实指向的path路径。
alias:用户输入的url路径没有被改变,这种情况更友好,让用户知道自己访问的路径,只是改变了UI的内容。

alias使用的注意事项

别名请不要用在path为'/'中,vue不支持这样使用

路由的过渡动画效果

// 想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性
<transition name="fade">
  <router-view ></router-view>
</transition>

fade-enter: 进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
fade-enter-active: 进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
fade-leave: 离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
fade-leave-active: 离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

匹配404

{
 path:'*', // 表示找不到对应路径的时候 则加载Error页面
 component:Error
}

路由钩子

我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也有钩子函数。路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中

1.当写在路由配置文件中
2.在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时,先来看一段具体的代码:

{
    path:'/params/:newsId(\\d+)',
    component: Params,
    beforeEnter:(to,from,next)=>{
      console.log('我进入了params模板');
      console.log(to);
      console.log(from);
      next();
}

to: 路由将要跳转的路径信息,信息是包含在对像里边的。
from: 路径跳转前的路径信息,也是一个对象的形式。
next: 路由的控制参数,常用的有next(true)和next(false)。

// 在组件模板中使用
export default {
name: 'params',
data () {
  return {
    msg: 'params page'
  }
},
beforeRouteEnter:(to,from,next)=>{
  console.log("准备进入路由模板");
  next();
},
beforeRouteLeave: (to, from, next) => {
  console.log("准备离开路由模板");
  next();
}
}
</script>

beforeRouteEnter:在路由进入前的钩子函数。
beforeRouteLeave:在路由离开前的钩子函数。

总结

大概就记录这些吧~ 用到的时候就翻过来看看🤦‍♀️ 之前专注力不好的时候,我感觉记录是最能让我聚精会神的,但是今天还是走神了~ 如有出错,还请指出🤝

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355