路由 Vue Router

对于单页面应用来说，如果涉及到多个页面的话，就必须要使用到路由，一般使用官方支持的 vue-router 库

一，Vue Router 在项目中的安装引用

1，在页面中使用<script>快速使用Vue Router开发

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>使用script直接引入Vue Router</title>

    </head>

    <body>

        <script src="https://unpkg.com/vue/dist/vue.js"></script>

        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

        <div id="app">

          <h1>页面共同header</h1>

          <p>

            <router-link to="/first">页面1</router-link>

            <router-link to="/second">页面2</router-link>

          </p>

          <router-view></router-view>

        </div>

        <script>

            //template也可以使用import从外部引入进来

            const first = { template: '<div>I am first</div>' }

            const second = { template: '<div>I am second</div>' }

            const routes = [

              { path: '/first', component: first },

              { path: '/second', component: second }

            ]

            const router = new VueRouter({

              routes

            })

            const app = new Vue({

              router

            }).$mount('#app')

        </script>

    </body>

</html>

2，在vue cli框架使用路由

app.js

<template>

  <div id="app">

      <router-view></router-view>

  </div>

</template>

main.js

import Vue from "vue";

import App from "./App.vue";

import router from "./router.js";

Vue.config.productionTip = false;

new Vue({

  router,

  render: h => h(App)

}).$mount("#app");

router.js

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const routes = [

        {

            path: '/index',

            name: 'index',

            component: () => import("@/views/index.vue"),

        },

        {

            path: '/login',

            name: 'login',

            component: () => import("@/views/login.vue"),

        },

        {

            path: '/fansNumber',

            name: 'fansNumber',

            component: () => import("@/views/fansNumber.vue"),

        }

];

routes.forEach(route => {

  route.path = route.path || '/' + (route.name || '');

});

const router = new Router({ routes });

router.beforeEach((to, from, next) => {

  //路由执行之前，处理一些逻辑

  next();

})

export default router;

 二，Vue Router 基础功能用法

1，router-路径式传参

//路由定义 router.js

const router = new VueRouter({

  routes: [

    // 动态路径参数 以冒号开头

    { path: '/user/:id', component: User }

  ]

})

//第一种编程式跳转指定路由 test.vue

const userId = '123'

this.$router.push({

  path: '/user/' + userId

})

//第二种编程式跳转指定路由 test.vue

this.$router.push({

  name: 'user',

  params: userId

})

//声明式跳转指定路由 test.vue

<router-link to="/user/{{userId}}">

  <span>跳转</span>

</router-link> 

//在user的js里面接收参数

created() {

  console.info(this.$route.params.userId)

}

注：你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。例如：

模式 匹配路径 $route.params
/user/:username /user/jack { username:'jack' }
/user/:username/pwd:password /user/jack/pwd/123 { username:'jack',pwd:123

2，router-get方式传参

//路由定义 router.js

const router = new VueRouter({

  routes: [

    { path: '/user', component: User }

  ]

})

//编程式跳转到指定路由 test.vue

this.$router.push({

name: "user",

query: {

    userName: 'jack'

    pwd: '123'

}

});

//在user的js里面接收参数

created() {

  console.info(this.$router.query.userName)

  console.info(this.$router.query.pwd)

}

3，编程式导航

  • router.replace() 和 router.push() 一样的用法，区别为：
  • router.push() 每次调用，都会往history里面添加一条新纪录，可以返回历史页面
  • router.replace() 每次调用，不会往history里面添加记录，而是会替换掉当前的history记录，没有历史记录
  • router.go(1)  //浏览器中，向前进一步，等同于history.foward()
  • router.go(-1) //浏览器中，向后一步，等同于history.back()

4，基于路由的动态过渡效果

<template>

  <div id="app">

    <transition name="fade">

      <router-view></router-view>

    </transition>

  </div>

</template>

<style lang="scss">

.fade-enter-active{

  transition: opacity .6s;

}

.fade-enter{

  opacity: .5;

}</style>

5，导航守卫，过滤器

const router = new VueRouter({

  routes: [

    {

      path: "/home",

      name: "Home",

      component: Home,

      meta: {

        type: '1',

        title: '首页'

      }

    }

  ]

});

//路由执行前

router.beforeEach((to, from, next) => {

  //校验token是否过期

  if(to.token && Util.checkToken(to.token)){

     return next({path: to.path});

   }else{

     return next({path: '/login'});

   }

   //使用路由自定义meta，统一处理title

   const title = to.meta && to.meta.title;

   if (title) {

     document.title = title;

   }

})

//路由执行后

router.afterEach((to) => {

    //恢复页面滚动位置

    window.scrollTo(0, 0);

});

export default router;

6，使用scrollBehavior中的异步滚动

const router = new Router({

  scrollBehavior(to, from, savedPosition) {

    // keep-alive 返回缓存页面后记录浏览位置

    if (savedPosition && to.meta.keepAlive) {

      return savedPosition;

    }

    // 异步滚动操作

    return new Promise((resolve) => {

      setTimeout(() => {

        resolve({ x: 0, y: 1 });

      }, 0);

    });

  },

});

更多功能，请参考router官网

Vue技术点整理-Vue Router的更多相关文章

  1. Vue技术点整理-Vue CLI

    Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...

  2. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  3. Vue技术点整理-vue.config.js

    1,proxy代理解决本地开发环境跨域问题 配置proxy代理后,proxy会将任何未知请求 (没有匹配到静态文件的请求) 代理到 https://192.168.3.49:8080 vue.conf ...

  4. Vue技术点整理-前言

    前言 Vue版本说明:本文档编写时,Vue稳定版本为 2.6.10 本文档编写目的为:整理Vue相关生态的技术点.和开发中经常使用到的技术点,让开发者快速上手开发,提升开发效率 一,Vue开发工具:本 ...

  5. Vue技术点整理-安装引入

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 所谓渐进式是指: 1,如果你有一个现成的web应用,你可以将vue作为该应用的一部分嵌入其中,带来更丰富的交互体验 ...

  6. Vue技术点整理-Vuex

    什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex ...

  7. Vue技术点整理 vue-devtools

    注:默认浏览器调试工具,在调试vue的页面时,是不能看到vue项目的属性状态值的,所以最好是在浏览器上安装 vue-devtools,这样就可以在浏览器里面审查和调试vue的应用了 1,Chrome浏 ...

  8. Vue技术点整理-指令

    我们通常给一个元素添加 v-if / v-show 来做权限管理,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余. 针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建 ...

  9. php开发面试题---jquery和vue对比（整理）

    php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...

随机推荐

  1. win10应用程序添加到开机启动项的两种解决办法

    原文 win10应用程序添加到开机启动项的两种解决办法 在windows10系统中,如果想让应用程序在开机之后自动运行起来,可以怎么做呢? 方法一: 1.首先创建应用程序的快捷方式 找到自己想加入开机 ...

  2. vs2017 cordova apk 第一个项目

    原文:vs2017 cordova apk 第一个项目 vs出到了2017,终于能正了八经跨平台开发,特别是终于不报一堆错了. cordova是个好东西,终于不用揽一个项目,还要被手机端瓜分大半血汗钱 ...

  3. MinGW 编译 libsndfile-1.0.25（只要有 MSYS，./configure make make install 就行了）

    最近做的一个项目需要读写 wav 文件.在网上找到 libsndfile 刚好满足我的需要.但是编译的时候遇到了点小麻烦,这里记录一下编译的过程,免得下次再编译时忘记了. 因为是在编译完成若干天后写的 ...

  4. Qt多线程学习-用例子来理解多线程

    文章出处:DIY部落(http://www.diybl.com/course/3_program/c/c_js/20090303/157373_3.html) POINT 1:QThread类的实例与 ...

  5. uni-app $refs的基本用法

    $refs的基本用法 一个对象(Object),持有注册过 ref 特性 的所有 DOM 元素和组件实例. <template> <view class="containe ...

  6. SYN1610型B码时统设备

       SYN1610型B码时统设备 产品概述 SYN1610型B码时统设备是由西安同步电子科技有限公司精心设计.自行研发生产的一款模块化配置的通用性时统终端,可接收北斗/ GPS信号/ IRIG-B码 ...

  7. SYN5104型 时间综合测试仪

    SYN5104型  时间综合测试仪 gps时钟测试仪时间/频率测量仪器使用说明视频链接: http://www.syn029.com/h-pd-73-0_310_6_-1.html 请将此链接复制到浏 ...

  8. YARN分析系列之一 -- 总览YARN组件

    下图简单明了的描述了hadoop yarn 的功能是如何从 hadoop 中细化出来的. 注:图片来自 https://apprize.info/php/hadoop/9.html Hadoop 从 ...

  9. 【设计模式】结构型01代理模式（Proxy Pattern）

    代理模式(Proxy Pattern) 定义:顾名思义,增加中间层,为其他对象提供一种代理以控制对这个对象的访问.核心在于代理二字. 1.和适配器模式的区别:适配器模式主要改变所考虑对象的接口,而代理 ...

  10. Codeforces Round #567 (Div. 2)A

    A. Chunga-Changa 题目链接:http://codeforces.com/contest/1181/problem/A 题目 Soon after the Chunga-Changa i ...