浅谈Vue.js路由管理器 Vue Router


Posted in Javascript onAugust 16, 2018

起步

HTML

<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>Hello App!</h1>
 <p>
  <!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <router-link to="/foo">Go to Foo</router-link>
  <router-link to="/bar">Go to Bar</router-link>
 </p>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 n内置组件-->
 <router-view></router-view>
</div>

JavaScript

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
 routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
 router
}).$mount('#app')

// 现在,应用已经启动了!

通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由:

export default {
 computed: {
  username () {
   // 我们很快就会看到 `params` 是什么
   return this.$route.params.username
  }
 },
 methods: {
  goBack () {
   window.history.length > 1
    ? this.$router.go(-1)
    : this.$router.push('/')
  }
 }
}

routes 选项 (Array)

redirect(重定向 )

//此时访问/a会跳转到/b
const router = new VueRouter({
 routes: [
  { path: '/a', redirect: '/b' }
 ]
})
//重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
 routes: [
  { path: '/a', redirect: { name: 'foo' }}
 ]
})
//甚至是一个方法,动态返回重定向目标:
const router = new VueRouter({
 routes: [
  { path: '/a', redirect: to => {
   // 方法接收 目标路由 作为参数
   // return 重定向的 字符串路径/路径对象
  }}
 ]
})

命名路由

export default [
  {
    path:'/',
    redirect:'/app' //默认跳转路由
  },
  {
    path: '/app',
    //路由命名,可用于跳转
    name: 'app',
  }
]

//可用于跳转
<router-link :to="{name:'app'}">app</router-link>

路由元信息

定义路由的时候可以配置 meta 字段:

export default [
  {
    path:'/',
    redirect:'/app' //默认跳转路由
  },
  {
    path: '/app',
    //**相当于HTML的meta标签**
    meta: {
      title: 'this is app',
      description: 'asdasd'
    },
  }
]

嵌套路由

export default [
  {
    path:'/',
    redirect:'/app' //默认跳转路由
  },
  {
    path: '/app',
    //子路由 匹配 /app/test
     children: [
      {
       path: 'test',
       component: Login
      }
     ]
  }
]

路由组件传参

export default [
  {
    path:'/',
    redirect:'/app' //默认跳转路由
  },
  {
    path: '/app/:id', // /app/xxx ,组件内部可以通过$route.params.id拿到这个值
    // 会把:后面的参数通过props传递给组件Todozhong 中
    //布尔模式
    props: true,
    //对象模式
    props:{id:456}
    //函数模式
    props: (route) => ({ id: route.query.b }),
    component: Todo,

  }
]

mode选项(string)

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

这种模式要玩好,还需要后台配置支持。

base(string)

应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

return new Router({
  routes,
  mode: 'history',//默认使用hash#
  base: '/base/', //在path前面都会加上/base/,基路径
 })

linkActiveClass(string)

默认值: "router-link-active"

全局配置 <router-link> 的默认“激活 class 类名”。

return new Router({
  routes,
  mode: 'history',//默认使用hash#
  base: '/base/', //在path前面都会加上/base/,基路径
  // 点击calss名字
  linkActiveClass: 'active-link', //匹配到其中一个子集
  linkExactActiveClass: 'exact-active-link',//完全匹配
 })

linkExactActiveClass(string)

默认值: "router-link-exact-active"

全局配置 <router-link> 精确激活的默认的 class。

scrollBehavior(Function)

路由跳转后是否滚动

export default () => {
 return new Router({
  routes,
  mode: 'history',//默认使用hash#
  base: '/base/', //在path前面都会加上/base/,基路径
  //页面跳转是否需要滚动
  /*
    to:去向路由,完整路由对象
    from:来源路由
    savedPosition:保存的滚动位置
  */
  scrollBehavior (to, from, savedPosition) {
   if (savedPosition) {
    return savedPosition
   } else {
    return { x: 0, y: 0 }
   }
  },
 })
}

parseQuery / stringifyQuery (Function)

/每次import都会创建一个router,避免每次都是同一个router
export default () => {
 return new Router({
  routes,
  mode: 'history',//默认使用hash#
  base: '/base/', //在path前面都会加上/base/,基路径
  // 路由后面的参数?a=2&b=3,string->object
   parseQuery (query) {

   },
   //object->string
  stringifyQuery (obj) {

   }
 })
}

fallback(boolean)

当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
如果设置为false,则跳转后刷新页面,相当于多页应用

<router-link>

过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:

<transition>
 <router-view></router-view>
</transition>

高级用法

命名视图

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
 routes: [
  {
   path: '/',
   components: {
   //默认组件
    default: Foo,
    //命名组件
    a: Bar,
    b: Baz
   }
  }
 ]
})

导航守卫

全局守卫

import Vue from 'vue'
import VueRouter from 'vue-router'

import App from './app.vue'

import './assets/styles/global.styl'
// const root = document.createElement('div')
// document.body.appendChild(root)
import createRouter from './config/router'
Vue.use(VueRouter)

const router = createRouter()

// 全局导航守卫(钩子)

// 验证一些用户是否登录
router.beforeEach((to, from, next) => {
  console.log('before each invoked')
  next()
//  if (to.fullPath === '/app') {
//   next({ path: '/login' })
//   console.log('to.fullPath :'+to.fullPath )

//  } else {
//   next()
//  }
})

router.beforeResolve((to, from, next) => {
  console.log('before resolve invoked')
  next()
})

// 每次跳转后触发
router.afterEach((to, from) => {
  console.log('after each invoked')
})

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#root")

路由独享的守卫

可以在路由配置上直接定义 beforeEnter 守卫:

export default [
  {
    path:'/',
    redirect:'/app' //默认跳转路由
  },
  {
 
    path: '/app',
    // 路由独享的守卫钩子
    beforeEnter(to, from, next) {
      console.log('app route before enter')
      next()
    }
    component: Todo,
  }
]

组件内的守卫

export default {
 //进来之前
 beforeRouteEnter(to, from, next) {
  // 不!能!获取组件实例 `this`
  // 因为当守卫执行前,组件实例还没被创建
  console.log("todo before enter", this); //todo before enter undefined
  //可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
  next(vm => {
    // 通过 `vm` 访问组件实例
   console.log("after enter vm.id is ", vm.id);
  });
 },
 //更新的时候
 beforeRouteUpdate(to, from, next) {
  console.log("todo update enter");
  next();
 },
 // 路由离开
 beforeRouteLeave(to, from, next) {
  console.log("todo leave enter");
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
   if (answer) {
    next()
   } else {
    //以通过 next(false) 来取消。
    next(false)
   }
 },
 props:['id'],
 components: {
  Item,
  Tabs
 },
 mounted() {
  console.log(this.id)
 },
};

路由懒加载

参考:路由懒加载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
js实现黑白div块画空心的图形
Dec 13 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 #Javascript
深入理解Vue router的部分高级用法
Aug 15 #Javascript
JS打印彩色菱形的实例代码
Aug 15 #Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 #Javascript
layui 优化button按钮和弹出框的方法
Aug 15 #Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 #jQuery
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 #Javascript
You might like
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
ECMAScript6--解构
2017/03/30 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
JS实现星星海特效
2019/12/24 Javascript
vue实现计算器功能
2020/02/22 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
python 用lambda函数替换for循环的方法
2018/06/09 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
PageFactory设计模式基于python实现
2020/04/14 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
Android笔试题总结
2014/11/29 面试题
社会实践自我鉴定
2013/11/07 职场文书
分公司经理任命书
2014/06/05 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
银行给客户的感谢信
2015/01/23 职场文书
介绍信范文
2015/01/31 职场文书
学校学期工作总结
2015/08/13 职场文书