vue-route 使用总结

route-vue使用总结（未完）

介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

文件配置

index.js 实例

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router.js'  	// 引入的路由匹配文件

Vue.use(VueRouter)

const router = new VueRouter({		// 创建 router 实例
  mode: 'history',
  base: process.env.BASE_URL, 		// 当模式为 history 模式才能使用基路径
  routes
})

export default router

route.js 实例

export default [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue'),
    children: [
    ]
  },
  // 主页
  { path: '/home', name: 'home', component: () => import('../views/Home.vue') }, // 路由懒加载
  // 工具
  {
    path: '/tools',
    name: 'tools',
    component: () => import('../views/Tools.vue'),
    // 嵌套路由
    children: [
      { path: 'goodWeb', name: 'goodWeb', component: () => import('../views/ToolsPage/GoodWeb.vue') },
      { path: 'goodTool', component: () => import('../views/ToolsPage/goodTool.vue') },
      { path: 'fronted', component: () => import('../views/ToolsPage/fronted.vue') }
    ]
  }, // 路由懒加载
  { path: '*', name: 'home', component: () => import('../views/Home.vue') } // 路由懒加载
]

重要标签理解

<router-link>

用来做路由导航用的，相当于 <a> 标签，to 属性指定目标地址，tag 属性可以把 router-link 标签渲染成其它标签，

<router-link> 比起写死的 <a href="..."> 要好，理由如下

• 无论 history 模式 还是 hash 模式，两者表现一致
• 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面
• 当在 history 模式下使用 base 选项之后， 所有的 to 属性都不需要再写 基准路径 了，方便书写路径

v-solt 属性先不做解释，参考官方文档

<router-link> 属性

to

类型：string | object

被点击时，会把 to 的值传到router.push()中，所以这个值可以是string | object，也就是说在使用js导航，push内也是一样得

// 范例
<!-- 字符串 -->
<router-link to="home">Home</router-link>

<!-- 使用 v-bind 的 JS 表达式, 就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上，这是`object`模式 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由，传参 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

类型：boolean，默认值： fasle

被点击时，会调用router.place()，而不是router.push()中，这里就不会产生 history 记录

<router-link :to="{ path: '/abc'}" replace></router-link>

append

类型：boolean，默认值： false

如果添加了这个属性，相当于在原来的路径基础上，继续添加路径

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

类型：string，默认值： a

把router-link标签渲染成指定标签，同样可以兼具点击的功能

<router-link to="/foo" tag="li">foo</router-link>

active-class

类型：string， 默认值： router-link-active

默认值可以通过路由的构造选项 linkActiveClass 来全局配置

<router-view>

渲染路径匹配到视图组件，同时<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。

因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

<router-view> 属性

name

类型：string， 默认值： default

如果 <router-view>设置了名称，则会渲染对应的路由配置中 components 下的相应组件

Router 匹配规则构建选项

这里是配置路径时的选项，在router.js页面中使用

interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // 命名路由
  components?: { [name: string]: Component }, // 命名视图组件
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void, // 看着像守卫
  meta?: any, // 路由元信息，可以传递数据

  // 2.6.0+
  caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object // 编译正则的选项
}

Router 匹配规则构建选项

这里是配置路由的模式，在index.js页面中使用

const router = new VueRouter({
    mode: 'history',				// 路由模式
    base: process.env.BASE_URL,	// 基础路径
    routes,
    linkActiveClass: 'active-link',	// 更改默认的激活的 class
    linkExactActiveClass: 'exact-active-link', // 更改默认的精确激活的 class
    scrollBehavior (to, from, savedPostion) {  // 页面跳转后，页面是否滚动
      if (savedPostion) {
        return savedPostion
      } else {
        return { x: 0, y: 0 }
      }
    },
    parseQuery (query) {},	// 自定义查询字符串的 解析/反解析 函数。覆盖默认行为
    stringifyQuery (obj) {},
    fallback: 'boolean' // 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
})

• linkActiveClass 和 linkExactActiveClass 有什么区别

打印 this.$router 你会发现什么？

属性

{
	app: {},				// 这里包含的是 Vue 根实例
	fallback: false，		// 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
	mode: "history",		// 路由模式
	currentRoute: {			// 当前路由相关信息
        fullPath: "/home"
        hash: ""
        matched: [{…}]
        meta: {}
        name: "home"
        params: {}
        path: "/home"
        query: {}
    }
}

守卫（俗称钩子函数，类似vue的生命周期）

router.beforeEach

相当于生命周期函数一样，路由跳转的时候会先经过这一层函数，可以处理一些信息，比如用户没有登录，而目的页跳转的也不是login，那就直接让他跳到login页去

router.beforeEach((to, from, next) => {
  // ...
})

• to: Route: 即将要进入的目标 路由对象 ，这个是属性
• from: Route: 当前导航正要离开的路由， 这个是属性
• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

其它钩子参考官方文档