Vue.js路由

1.设置路由

① 路由map

main.js中导入vue-router

import VRouter from 'vue-router'

设置全局路由

Vue.use(VRouter)

实例化router

let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    //  做一个映射表
    {
      path: '/apple',
      component: Apple
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
②路由视图

app.vue文件中嵌入<router-view></router-view>

<template>
  <div id="app">
    ![](./assets/logo.png)
    <!--
    访问apple的时候,将apple的视图塞到这个位置
    访问banana的时候,将banana的视图塞到这个位置
    -->
    <router-view></router-view>
  </div>
</template>

实现效果

路由视图
③ 路由导航

app.vue文件中,嵌入router-link标签,该标签可以实现a标签的效果

<router-link :to="{path:'apple'}">to apple</router-link>

具体使用:

<template>
  <div id="app">
    ![](./assets/logo.png)
    <!--
    访问apple的时候,将apple的视图塞到这个位置
    访问banana的时候,将banana的视图塞到这个位置
    -->
    <router-view></router-view>
    <router-link :to="{path:'apple'}">to apple</router-link>
    <router-link :to="{path:'banana'}">to banana</router-link>
  </div>
</template>

效果:

路由导航

2.路由参数

作用:为页面传递路由参数.

在路由映射表中配置需要传递的参数:
比如:apple页面,我需要传递一个color的参数,可以在path中以:开头设置参数.

 path: '/apple/:color',

具体使用:

let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    //  做一个映射表
    {
      path: '/apple/:color',
      component: Apple
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})

当我在页面跳转时,直接在地址后面拼接参数,下面的red,即为传递的color参数

http://localhost:8080/apple/red

script标签中获取页面传递的参数,通过this.$route.params全局的对象来获取

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="getParams">get params</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'I am componnet apple'
      }
    },
    methods: {
      getParams () {
        console.log(this.$route.params)
      }
    }
  }
</script>

上面的打印结果为:

{color: "red"}

template标签中使用界面传递过来的参数,可以使用$route.params.color

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <p>{{$route.params.color}}</p>
    <button @click="getParams">get params</button>
  </div>
</template>
$route.params.color 获取页面传递的参数
传递多个参数

路由中设置如下:

path: '/apple/:color/detail/:type',

传递参数的url:

http://localhost:8080/apple/red/detail/3

打印传递过来的所有参数:

{color: "red", type: "3"}

3.嵌套路由(子路由)

children
嵌套路由,子路由插入到了父组件apple中


let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    //  做一个映射表
    {
      path: '/apple',
      component: Apple,
      // 嵌套路由,子路由插入到了父组件apple中
      children: [
        {
          path: 'red',
          component: RedApple
        }
      ]
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})

在父路由apple组件中,将RedApple组件插入进来

<template>
  <div class="hello">
    .......
    <router-view></router-view>
  </div>
</template>
嵌套子路由

to red apple

<router-link :to="{path:'apple/red'}">to red apple</router-link>

路由的其他操作

基于当前路径下,跳转到apple

    <router-link to="apple">to apple</router-link>
    上面的和下面的区别
    <router-link :to="{path:'banana'}">to banana</router-link>

如果要跳到根目录,在apple前加/

    <router-link to="/apple">to apple</router-link>
    上面的和下面的区别
    <router-link :to="{path:'banana'}">to banana</router-link>

如果绑定的话,我们也可以动态的修改路径

<template>
  <div id="app">
    <router-link :to="path">to apple</router-link>
    ......
  </div>
</template>

<script>
  export default {
    data () {
      return {
        path: 'apple'
      }
    }
  }
</script>

如果绑定的话,不想动态修改路径,我们也可以直接写死,

注意:apple一定要用单引号括起来,不然他会去data里面找apple,会报找不到对象的error
<router-link :to="'apple'">to apple</router-link>

也可以传递参数

<router-link :to="{path:'banana',param:{color:'yellow'}}">to banana</router-link>

通过tag,将link变成li标签,当然也可以设置变成其他标签

<router-link :to="'apple'" tag="li">to apple</router-link>

*以上都属于声明式导航
下面感受下编程式导航
可以通过push,跳转到特定的页面

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

应用场景:
当我们每次路由切换的时候,为他设置一些操作

比方说:检查用户的登录状态,如果用户未登录,就通过编程式导航跳转到登录界面
router.beforeEach(router.push('登录界面'))

4.命名路由和命名视图

  • 命名路由
    我们可以在设置路由时,给设一个name属性,导航过程中直接:to="{name: '对应的name'}"即可
let router = new VRouter({
  mode: 'history',
  routes: [
    {
      path: '/apple',
      component: Apple,
      //命名路由
      name: 'applePage',
    }
   ......
  ]
})

在外面其他地方使用时:

<router-link :to="{name: 'applePage'}" >to apple</router-link>
  • 命名视图
    和上面的命名路由相似,给component,添加指定的命名
let router = new VRouter({
  mode: 'history',
  routes: [
    {
      path: '/apple',
      //命名视图
      component: {
        viewA: Apple,
        viewB: RedApple
      },
      //命名路由
      name: 'applePage',
    }
   ......
  ]
})

在外面其他地方使用时:

<router-view name="viewA"></router-view>
或者
<router-view name="viewB"></router-view>
分别插入不同的视图

5.重定向

redirect
初始化路由时设置

let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    {
      //当路径为'/'时,重新跳转到apple
      path: '/',
      //设置重定向
      redirect: '/apple'
    },
    {
      path: '/apple',
      ......
    },
    {
      path: '/banana',
      ......
    }
  ]
})
重定向

6.使用过渡动画制作路由跳转动画

keep-live :切换过的视图会被缓存起来,如果不加keep-live 每次都会去重新请求一次,这样比较消耗资源

<transition name="fade">
   <keep-alive>
      <router-view></router-view>
   </keep-alive>
</transition>

注意:

当我们切换导航的时候,当前的link标签的类会被赋值为class="router-link-active",这是一个很有用的操作.

router-link添加active-class="active" 用于修改样式

<ul>
    <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
     {{ item.name }}
    </router-link>
</ul>

css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
  background: #4fc08d;
  color: #fff;
}
......
  • router-viewkeep-alive属性,保证该视图只渲染一次,来回切换不重复渲染

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

推荐阅读更多精彩内容