【Vue】Re17 Router 第四部分(参数传递，守卫函数)

一、案例搭建

新建Profile组件

组件写好内容后配置路由

  {
    path : '/profile',
    component : () => import('../components/Profile')
  }

二、参数配置

App.vue配置profile

我们可以使用对象对to的url进行封装

path属性就是url

query属性就是我们的请求数据【给地址的请求参数】

<template>
  <div id="app">
    <router-link to="/home" tag="button" >去首页</router-link>
    <router-link to="/about" tag="button" >去关于</router-link>
    <router-link :to="/user/+username" tag="button" >用户管理</router-link>
    <router-link :to="ppp" tag="button" >profile</router-link>
<!--    <button @click="toHome">首页</button>-->
<!--    <button @click="toAbout">关于</button>-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data()  {
    return {
      username : 'aaa',
      ppp : {
        path : '/profile',
        query : {
          name : 'aaa',
          age : 22,
          gender : true
        }
      }
    }
  }
  // methods : {
  //   toHome () {
  //     this.$router.push('/home');
  //   },
  //   toAbout () {
  //     this.$router.push('/about');
  //   }
  // }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

可以看到参数这样传递过来了

如果要取出请求参数，则可以这样：

写在方法里面获取，记得先从this对象引用

<template>
  <div>
    <h3>Profile-Component</h3>
    <p>
      profile component content ... <br>
      name -> {{$route.query.name}} <br>
      age -> {{$route.query.age}} <br>
      gender -> {{$route.query.gender}}
    </p>
  </div>
</template>

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

<style scoped>

</style>

路由的代码写法：

<template>
  <div id="app">
    <router-link to="/home" tag="button" >去首页</router-link>
    <router-link to="/about" tag="button" >去关于</router-link>
    <router-link :to="/user/+username" tag="button" >用户管理</router-link>
<!--    <router-link :to="ppp" tag="button" >profile</router-link>-->
    <button @click="toProfile" >profile</button>
<!--    <button @click="toHome">首页</button>-->
<!--    <button @click="toAbout">关于</button>-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data()  {
    return {
      username : 'aaa',
      ppp : {
        path : '/profile',
        query : {
          name : 'aaa',
          age : 22,
          gender : true
        }
      }
    }
  },
  methods : {
    toHome () {
      this.$router.push('/home');
    },
    toAbout () {
      this.$router.push('/about');
    },
    toProfile() {
      this.$router.push(this.ppp);
    }
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

三、$route & $router的区别？

router是全局路由控制器对象

route是当前活跃的路由对象，是routes属性数组中的一个元素，也可以是router对象内部的一个属性对象

https://www.bilibili.com/video/BV15741177Eh?p=113

四、导航守卫方法

1、回顾Vue实例的生命周期

  created() {
    // todo ... Vue创建时调用此函数，
  },
  mounted() {
    // todo ... Vue实例开始挂载虚拟DOM时调用此函数
  },
  updated() {
    // todo ... ... 组件数据发生更新时调用
  },

点击不同的子组件，更换标签文本的需求：

每一次访问不同的组件都会调用created函数

所以可以：

created() {
  // todo ... Vue创建时调用此函数，
  document.title = '关于-About';
},

但是这样N个组件就要写N次了，都是路由跳转的方式进行的

那么只要在监听路由跳转，在那个时刻把title组件的某一个数据就行了

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

/* 方式一 */
const Home = resolve => {
  require.ensure(
    ['../components/Home.vue'],
    () => resolve(require('../components/Home.vue'))
  )
}
/* 方式二 */
const About = resolve => {
  require(['../components/About.vue'],resolve);
}
/* 方式三 */
const User = () => import('../components/User.vue');

const News = () => import('../components/home/News');
const Messages = () => import('../components/home/Messages');

const routerList = [
  /* 重定向首页路由配置 */
  {
    path : '', /* 缺省值默认指向 '/' */
    redirect : '/home',
  },
  {
    path : '/home', /* 为什么这里是path不是url？ 因为完整的url还包括 项目根url（协议头 + 域名（或者IP地址） + 端口号 + 项目根名称路径（可选））  */
    name : 'home', /* 名字可以不加 */
    component : Home, /* 使用懒加载后component这里高亮显示 */
    children : [ /* 设置子路由 */
      {
        path : '', /* 这个缺省默认/home */
        redirect : 'news',
      },
      {
        path : 'news', /* 等同于 /home + /news = /home/news 这里不需要再加斜杠了 */
        component : News,
        meta : {
          title : '新闻列表 - News'
        }
      },
      {
        path : 'messages',
        component : Messages,
        meta : {
          title : '消息列表 - Messages'
        }
      }
    ],
    meta : {
      title : '首页 - Home'
    }
  },
  {
    path : '/about',
    name : 'about',
    component : About,
    meta : {
      title : '关于 - About'
    }
  },
  {
    path : '/user/:username', /* 动态路径：冒号+字符 */
    name : 'user',
    component : User,
    meta : {
      title : '用户 - User'
    }
  },
  {
    path : '/profile',
    component : () => import('../components/Profile'),
    meta : {
      title : '档案 - Profile'
    }
  }
]
const router = new Router({
  routes : routerList,
  mode : 'history',
});

/* 在创建实例后调用 */
router.beforeEach((to, from, next) => {
  // 调用这个方法以为着重写，一定要调用 next方法, 否则路由无法跳转

  // from 来自于哪个路由对象
  // to 跳转到哪个路由对象

  // 按照案例的需求，就可以这样设置了 route就是一个个routes的元素对象
  // 可以设置一个meta属性对象，放入title属性和对应的值即可
  document.title = to.meta.title;

  // 但是子路由没有命名的话会早曾undefined显示，因为meta属性为空
  // 解决方案 document.title = to.matched[0].meta.title;

  // 跳转要放在最后，不然是跳完了再执行标签的文本更换
  next();
});
export default router;

afterEach守卫方法：

router.afterEach((to, from) => {
  // 因为是跳转之后调用，自然而然的不需要next函数了
  // TODO ... ...
});

上述的两个都是全局守卫方法，在路由配置中重写并调用

五、局部路由守卫

详细资料：

https://router.vuejs.org/guide/advanced/navigation-guards.html

You can define  beforeEnter  guards directly on a route's configuration object:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

In-Component Guards

Finally, you can directly define route navigation guards inside route components (the ones passed to the router configuration) with the following options:

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },
  beforeRouteUpdate (to, from, next) {
    // called when the route that renders this component has changed.
    // This component being reused (by using an explicit `key`) in the new route or not doesn't change anything.
    // For example, for a route with dynamic params `/foo/:id`, when we
    // navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
    // will be reused (unless you provided a `key` to `<router-view>`), and this hook will be called when that happens.
    // has access to `this` component instance.
  },
  beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }
}