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

Vue 2019-01-07

起步

HTML

rush:xhtml;">

Hello App!

JavaScript

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '

foo

' }
const Bar = { template: '

bar

' }

// 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 访问当前路由：

1 ? this.$router.go(-1) : this.$router.push('/') } } }

routes 选项 (Array)

redirect（重定向）

{ // 方法接收目标路由作为参数 // return 重定向的字符串路径/路径对象 }} ] })

命名路由

//可用于跳转
<router-link :to="{name:'app'}">app

路由元信息

定义路由的时候可以配置 meta 字段：

嵌套路由

路由组件传参

({ id: route.query.b }),component: Todo,} ]

mode选项(string)

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

这种模式要玩好，还需要后台配置支持。

base(string)

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

linkActiveClass(string)

默认值: "router-link-active"

全局配置的默认“激活 class 类名”。

linkExactActiveClass(string)

默认值: "router-link-exact-active"

全局配置精确激活的默认的 class。

scrollBehavior(Function)

路由跳转后是否滚动

{ return new Router({ routes,基路径 //页面跳转是否需要滚动 /* to:去向路由,完整路由对象 from:来源路由 savedPosition:保存的滚动位置 */ scrollBehavior (to,from,savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0,y: 0 } } },}) }

parseQuery / stringifyQuery (Function)

{ return new Router({ routes,基路径 // 路由后面的参数?a=2&b=3,string->object parseQuery (query) {

},//object->string
stringifyQuery (obj) {

}
})
}

fallback(boolean)

当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。如果设置为false,则跳转后刷新页面，相当于多页应用

过渡动效

是基本的动态组件，所以我们可以用组件给它添加一些过渡效果：

高级用法

命名视图

const router = new VueRouter({
routes: [
{
path: '/',components: {
//默认组件
default: Foo,//命名组件
a: Bar,b: Baz
}
}
]
})

导航守卫

全局守卫

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,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,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 守卫：

path: '/app',// 路由独享的守卫钩子
beforeEnter(to,next) {
  console.log('app route before enter')
  next()
}
component: Todo,}

]

组件内的守卫

{ // 通过 `vm` 访问组件实例 console.log("after enter vm.id is ",vm.id); }); },//更新的时候 beforeRouteUpdate(to,next) { console.log("todo update enter"); next(); },// 路由离开 beforeRouteLeave(to,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) },};