浅谈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 相关文章推荐
JS 面向对象之神奇的prototype
Feb 26 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
使用vue构建多页面应用的示例
Oct 22 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/05/15 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php安装swoole扩展的方法
2015/03/19 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python实现简易数码时钟
2021/02/19 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python xlwt模块使用代码实例
2020/06/10 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
实习自我鉴定范文
2013/10/30 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js