给后端同学的Vue课程（三）：路由基础

@集成VueRouter

集成VueRouter

• 使用vue create xxx创建工程时选中Router即可；

路由配置

• src/router/index.js即全局路由配置文件
• 该文件中维护着项目的路由表

import HomeView from '../views/HomeView.vue'
const routes = [
  {
     path: '/',
     name: 'home',
     component: HomeView
  },

  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  
  ...
}

• 该文件基于上述路由表配置一个router对象并对外导出

/* 基于路由表创建路由器 */
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 对外导出路由器对象
export default router

• 整个项目的逻辑入口文件随后将上述router对象配置给全局

// 导入src/router/index.js模块所导出的router对象
import router from './router'

new Vue({
  // 配置router到全局Vue实例中
  router,
  render: h => h(App)
}).$mount('#app')

• 我们对路由编程的核心就是书写和配置路由表

@基本跳转

router-link

<router-link to="/cart">购物车</router-link>

其编译的最终结果为

<a href="/cart">购物车</a>

为/cart配置路由表

const routes = [
  ...
  {
    path: '/cart',
    component: () => import("../views/CartView.vue")
  },
  ...
]

router-view

<template>
  <div id="app">

    <nav>
      <router-link to="/cart">购物车</router-link> |
      <router-link to="/demos">案例</router-link> |
      <router-link to="/about">关于Vue</router-link>
    </nav>

    <!-- router-link对应跳转的组件会呈现在router-view容器中 -->
    <router-view />
  </div>
</template>

@重定向

  {
    path: '/',
    redirect: "/about"
  },

@编程式导航

this.$router.push("要跳转的路由")
this.$router.back()

@动态路由

  {
    path: '/detail/:id(\\d{3})',
    component: () => import("../views/DetailView.vue"),
  },

this.$route.params.id

@路由元信息

  {
    path: '/detail/:id(\\d{3})',
    component: () => import("../views/DetailView.vue"),
    meta: {
      backable: true
    }
  },

<a class="back" @click="$router.back()" v-show="$route.meta.backable"> | 返回</a>

@父子路由

  {
    path: '/demos',
    component: () => import("../views/DemosView.vue"),
    children: [
      {
        path: 'directive',
        component: () => import("../views/demos/DemoDirective.vue")
      },
      {
        path: 'computed',
        component: () => import("../views/demos/DemoComputed.vue")
      },
      {
        path: 'lifecycle',
        component: () => import("../views/demos/DemoLifeCycle.vue")
      },
    ]
  },

<template>
    <div class="dv-wrapper">
        <nav>
            <RouterLink class="links" to="/demos/directive">
                <h1 class="title">基础指令</h1>
            </RouterLink>

            <RouterLink class="links" to="/demos/computed">
                <h1 class="title">方法 VS 计算属性</h1>
            </RouterLink>

            <RouterLink class="links" to="/demos/lifecycle">
                <h1 class="title">组件通信&生命周期</h1>
            </RouterLink>
        </nav>

        <RouterView class="box"></RouterView>
    </div>
</template>