浅谈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实现划词标记+划词搜索功能
Mar 06 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
vue element-ui读取pdf文件的方法
Nov 26 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php实现字符串翻转的方法
2015/03/27 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
python微信公众号开发简单流程实现
2020/03/09 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
大四学生思想汇报
2014/01/13 职场文书
安全生产月标语
2014/10/07 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书