vue-router路由配置与使用

配置参数

使用路由

1 2 3 4 5 6 7 8 9

<router-link to="/user">Go to User</router-link> <router-link :to="{ name: 'user', params: { userId: 123 } }">Go to User</router-link> <!--内嵌a标签，右击有效，可控制窗口打开方式--> <router-link tag="li" to="/index"> <a href="javascript:;" target="_blank">平台首页</a> </router-link> <!--命名视图，路由组件--> <router-view name="header"></router-view>

路由配置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history',  // 根目录下跳转，需要后端配置；默认hash模式 base: __dirname, linkActiveClass: 'active', // 全局配置 激活态类名 routes: [ { path: '/first/:pid?', // ? 可选参数 component: Firstcomponent, alias: '/b' // 别名 meta: { requiresAuth: true } // 定义路由元信息，meta字段 }, { path: '/second', // / 开头的嵌套路径会被当做根路径 components: { header: header, // 对应<router-view>的name default: main, footer: footer } }, { path: '/user/:id', components: { // 模板传参 default: { template: '<div>' + '<router-view name="innerHeader"></router-view>' + '<router-view></router-view>' + '</div>' }, }, children: [{ // 嵌套路由 // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts }] }, { path: '*', // 不存在的地址 重定向 redirect: '/first' } ] }) // 注入路由组件 new Vue({ 大专栏  vue-router路由配置与使用 router }).$mount('#app')

属性

• this.$route.name // 当前路由
• params.pid // 获取路由参数
• hash // 获取当前url
• query // 查询参数

1 2 3 4

// 监听路由变化 watch: { '$route': 'callbackFun' },

方法

• this.$router.push()

  • onComplete 导航成功完成后执行
  • onAbort
  • 路由相同，参数不同，使用beforeRouteUpdate响应变化

    1 2 3 4 5 6 7 8

    // 字符串 router.push('home') // 对象，path情况下忽略params router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})

• go(n)
• back()、go(-1)
• replace()

• beforeEach((to, from, next) => {}) 监听路由更新，跳转路由前的入口控制，可用于权限判断

  • to 下一个路由
  • from 当前路由
  • next
    • next() 下一个钩子，直到next()都执行完，才确认跳转
    • next(false) 中断跳转
    • next(‘/‘) 跳转到指定路由

响应路由

导航完成后获取数据

created中获取，并展示loading状态

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template> <div class="post"> <div class="loading" v-if="loading"> Loading... </div> <div v-if="error" class="error"> {{ error }} </div> <div v-if="post" class="content"> <h2>{{ post.title }}</h2> <p>{{ post.body }}</p> </div> </div></template>

导航完成前获取数据

beforeEach，获取后next()

路由懒加载

• 异步组件、
• webpack代码分割

  1 2 3 4 5 6 7 8 9 10 11

  // Foo.vue const Foo = () => Promise.resolve({ // ... 组件定义对象 }) // 引用组件，Babel需要添加 syntax-dynamic-import解析语法 const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })