vue路由知识整理

vue路由知识整理

对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

参考文章

https://router.vuejs.org/zh-c...

动态配置路由

HTML

  <p>
    <!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} -->
    <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); -->
    <!-- 接收参数时用（注意是$route而不是$router了哦）this.$route: this.$route.params.isLogin; 和 this.$route.query.isLogin -->
    <router-link :to="{name:'login',params: {isLogin: true}}">亲，请登录</router-link>
    <router-link :to="{name:'login',params: {isLogin: false}}">免费注册</router-link>
  </p>
  <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

route/index.js

import Vue from 'vue';
import Router from 'vue-router';
import login from 'pages/login/login.vue';
import home from 'pages/home/home.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/home',
      // 命名路由，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由
      // 使用<router-link :to="{ name: 'main', params: { userId: 123 }}">User</router-link> 或者 router.push({ name: 'main', params: { userId: 123 }})
      name: 'home',
      component: home,
      meta: { // 路由元信息
        keepAlive: false,
        auth: false,
        title: '主页'
      },
      // 如果 props: true 被设置为 true，route.params 将会被设置为组件属性
      // 路由组件传参 https://router.vuejs.org/zh-cn/essentials/passing-props.html
      props: false,
      beforeEnter: (to, from, next) => { // 路由独享守卫 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
        console.log('beforeEnter');
        next();
      }
    },
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: {
        keepAlive: false, // 用于在 <keep-alive> 中使用，判断是否需要进行缓存
        auth: false, // 判断是否需要进行登录校验
        title: '登录' /* 可以通过$route.meta.title 后取当前的描述信息、菜单信息 */
      }
    },
    {
      path: '*', /* 默认跳转到登录界面 */
      redirect: {path: '/login'}
    }
  ],
  // <router-link to="/bar#anchor">/bar#anchor</router-link>
  // 可以通过selector模拟滚动到锚点的行为 { selector: string, offset? : { x: number, y: number }}
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) { // 浏览器后退/前进时savedPosition可用
      return savedPosition;
    } else if (to.hash) {
      return {
        selector: to.hash
      };
    } else {
      return new Promise((resolve, reject) => { // 异步滚动
        setTimeout(() => {
          resolve({x: 0, y: 0});
        }, 500);
      });
    }
  }
});

router.beforeEach((to, from, next) => {// 注册一个全局前置守卫
  if (to.matched.some(m => m.meta.auth)) {// 判断是否需要校验
    var a = true;

    if (a) { // 获取
      next(); // 校验通过，正常跳转到你设置好的页面
    } else {
      next({ // 校验失败，跳转至登录界面
        path: '/login',
        query: {
          redirect: to.fullPath
        } // 将跳转的路由path作为参数，用于在登录成功后获取并跳转到该路径
      });
    }
  } else {
    next(); // 不需要校验，直接跳转
  }
});

export default router;

login.js

export default {
  validator: null,
  data () {
    return {
      isLogin: true
    };
  },
  created () {
    // 接受路由参数，并判断是登录还是注册页面（注：是$route而不是$router）
    if (this.$route.params.isLogin !== undefined) {
      this.isLogin = this.$route.params.isLogin;
    }
  }
};