浅谈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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
原生js编写焦点图效果
Dec 08 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
splice slice区别
2006/10/09 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
jcrop基本参数一览
2013/07/16 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
js中url对象化管理分析
2017/12/29 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
vue中实现高德定位功能
2019/12/03 Javascript
python调用百度REST API实现语音识别
2018/08/30 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
pandas针对excel处理的实现
2021/01/15 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
Born鞋子官网:Born Shoes
2017/04/06 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
早餐连锁店计划书
2014/01/08 职场文书
法制宣传口号
2014/06/16 职场文书
考试保密承诺书
2014/08/30 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
红与黑读书笔记
2015/06/29 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书