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

起步

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)
 },
};

路由懒加载

参考:路由懒加载

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

(0)

相关推荐

  • 使用vue-router为每个路由配置各自的title

    传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无用功.显得十分蠢. 使用Vue-Router的方法 首先打开/src/router/index.js文件. 找到如下代码. const vueRouter = new Router({ routes, mode: 'history', linkActiveClass: 'active-link',

  • Vue-router 中hash模式和history模式的区别

    Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash";   mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向

  • Vue-Router模式和钩子的用法

    上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧 模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择,history 和 hash,大致对比一下, 模式 优点 缺点 hash 使用简单.无需后台支

  • vue-router中scrollBehavior的巧妙用法

    问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></

  • Vue Router去掉url中默认的锚点#

    hash模式url vue-router默认hash模式--使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载. 如果不想要这种默认的hash模式,可以用路由的history模式,这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面. index.js Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path:"/xxx&quo

  • vue系列之requireJs中引入vue-router的方法

    requireJs简介 参数配置 requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单. require define 其中define是用于定义模块,而require是用于载入模块以及载入配置文件. define([id,deps,] callback); require(deps[,callback]); 加载配置文件 独立的引入配置文件也有两种方式,一种是通过script标签加载外部JS文件形式: <script src="js/require.js&

  • vue router 配置路由的方法

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 路由的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  • vue升级之路之vue-router的使用教程

    使用 Vue 构建的项目,一个页面是由多个组件构成的,而且经常是做成单页面应用,所以在跳转页面的时候,传统的 href 已经跟不上时代的步伐了,于是 vue-router 应运而生 在使用 vue-router 的时候,需要看看自己是否装了这个依赖,没有的话可以使用 npm install vue-router -S ,不过现在构建vue项目时有可以选择是否安装 vue-router,大家注意一下就行了 一.路由的配置 自动安装的vue-router,会在src 文件夹下有个一个 router

  • 深入理解Vue router的部分高级用法

    今天要介绍的是路由元信息,滚动行为以及路由懒加载这几个的使用方法. 1.路由元信息 什么是路由元信息,看看官网的解释,定义路由的时候可以配置 meta 字段可以匹配meta字段,那么我们该如何使用它,一个简单的例子,改变浏览器title的值.下面上代码. //简单的我就不写了直接上解决方案 import Vue from 'vue' import Router from 'vue-router' import Login from '../login/Login' import Home fro

  • 详解从Vue-router到html5的pushState

    最近在用vue的时候突然想到一个问题 首先,我们知道vue实现的单页应用中一般不会去刷新页面,因为刷新之后页面中的vuex数据就不见了. 其次,我们也知道一般情况下,url变更的时候,比如指定location.href.history.push.replace等,页面就会刷新. 那么问题来了,vue页面的页面跳转时怎么实现的?没刷新页面么?没刷新页面,又要改变url,加载新内容怎么做的? 去翻了一下vue-router的源码,找到这样一段 export class HTML5History ex

随机推荐