第5章 vue路由

1.安装

使用npm在工程中安装vue-router

npm install vue-router --save

2.配置

在src目录下新建router目录,在目录中新建index.js
其中声明路由配置

import Vue from 'vue'
import Router from 'vue-router'
import house_list from '@/components/house_list.vue'
import house_detail from '@/components/house_detail.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'house_list',
      component: house_list
    },
    {
      path: '/detail',
      name: 'house_detail',
      component: house_detail
    }
  ]
})

3.使用

在main.js中加载vue-router

import router from './router/index.js'

在vue实例中使用router

new Vue({
  render: h => h(first),
  router
}).$mount('#app')

使用<router-view></router-view>表示此处使用路由指定的页面

<template>
    <div id="first">
        <navi></navi>
        <router-view></router-view>
    </div>
</template>

<navi>是一个导航组件,其中定义了导航菜单

<template>
    <div class="banner">
        <div class="logo">Anjoke</div>
        <div class="navigator">
            <ul>
                <li>
                    <router-link to="/">首页</router-link>
                </li>
                <li>
                    <router-link to="/detail">详细</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

其中<router-link to="/">会被解析为一个超链接,表示vue-router指向的路径

4.路由传参

现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。

<router-link :to="{name:'aaa',params:{id:hid}}">跳转</router-link>

4.1 方案一

在index.js的router配置中,要在path中添加/:hid来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。此方式类似于restful风格的url,个人推荐使用

{
  path: '/describe/:hid',
  name: 'demo',
  component: xxxx组件
}
  • 普通超链接或者按钮
<button @click="getDescribe(hid)">
function getDescribe(id) {
   this.$router.push({
          path: `/describe/${hid}`,
   })
}
  • router-link
<router-link :to="{name:'demo',params:{hid:hid}}">跳转</router-link>

子组件中通过以下代码获取

this.$route.params.hid

4.2 方案二

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示。如果不添加:id数据会在刷新的时候消失。此方式类似post方式,可以不在url上显示传输数据,但页面刷新可能造成数据丢失
index.js中关于router的配置

{
  path: '/describe',
  name: 'demo',
  component: xxxx组件
}

超链接或普通按钮

function getDescribe(id) {
   this.$router.push({
          name: 'demo',
          params: {
            hid: hid
          }
   })
}

子组件中通过以下代码获取

this.$route.params.hid

4.3 方案三

用path来匹配路由,然后通过query来传递参数这种情况下 query传递的参数会显示在url后面?id=?
index.js中关于router的配置。此方式类似get方式的url传值形式

{
  path: '/describe',
  name: 'demo',
  component: xxxx组件
}

超链接或普通按钮

function getDescribe(id) {
   this.$router.push({
          name: 'demo',
           query: {
            id: id
          }
   })
}

子组件中通过以下代码获取

this.$route.query.id

5.路由守卫

5.1 全局守卫

所谓全局路由守卫,就是小区大门,整个小区就这一个大门,你想要进入其中任何一个房子,都需要经过这个大门的检查。
全局路由守卫有个两个,一般定义在main.js中:

  • 全局前置守卫
router.beforeEach((to, from, next) => {
    console.log(to) => // 到哪个页面去
    console.log(from) => // 从哪个页面来
    next() => // 一个回调函数
}
  • 全局后置守卫
router.afterEach(to,from) = {}

next():回调函数参数配置

  • next(): 继续当前的导航
  • next(false): 中断当前的导航。
    如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址
  • next('/') : 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
  • next({ path: '/' }): 当前的导航被中断,然后进行一个新的导航。
    可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项

5.2 组件路由守卫

跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫

  • 在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
beforeRouteEnter (to, from, next) {
    next(vm => {})
}
  • 同一页面,刷新不同数据时调用,
beforeRouteUpdate (to, from, next) 
}
  • 离开当前路由页面时调用
beforeRouteLeave (to, from, next) {
}

5.3 独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})

推荐阅读更多精彩内容