vue-router路由使用步骤

以@vue/cli创建的基础项目为例讲述该项目中是如何使用路由进行页面跳转的

1 设置链接

项目的根组件为App组件，项目首先渲染的便是该组件，因此链接和容器均在定义在该组件中

2 设置容器

该容器用于展示要渲染的组件

<template>
  <div id="app">
    <div id="nav">
      <!-- 第一步：设置链接 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
      <!-- 第二步：设置容器 -->
    <router-view/>
  </div>
</template>

3 提供要渲染的组件

项目中App组件中涉及到了两个组件，Home组件和About组件，因此创建项目在Views文件夹下创建了这两个组件

4 配置路由信息

首先导入要配置的路由信息的组件，然后在router文件夹下的index.js文件中配置

5 实例化路由并使用路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入要配置路由信息的Home组件
import Home from '../views/Home.vue'

Vue.use(VueRouter)

//第四步：配置路由信息
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

//第五步：实例化路由并使用路由配置
const router = new VueRouter({
  routes
})

export default router

实际上，项目中实例化路由和使用路由是分开的，实例化路由是在index.js文件中进行的，而使用路由而是在main.js进行的

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  //使用路由
  router,
  render: h => h(App)
}).$mount('#app')

实际项目中是如何实践这五个步骤的？

1 修改基础项目

要对新创建的基础项目做些处理。首先修改根组件App.vue，然后删除Home、About、Hello World三个组件。App.vue修改后如下所示

<template>
  <div>
    <!-- 此处已设置好容器 -->
    <router-view/>
  </div>
</template>

<style>

</style>

2 登录组件

对于一个系统而言，肯定要有登录页面（Login.vue），因此我们先创建登录组件，然后将登录页面的路由信息配置为根路径，容器就使用根组件App.vue中设置的，至于实例化路由并使用路由配置，创建项目之初就已经配置好了的，我们无需再多加配置，如此项目启动后便会在根组件设置的容器中加载出登录组件。对于路由路径为根路径的组件是不需要设置链接的，这便是登录页面的五个步骤。

3 首页组件

成功登录系统后便会进入系统的首页（Home.vue），这是我们开发的第二个组件，对于这个组件，他的五个步骤如下：

1. 设置链接实际上是在登录页面上进行的，因为我们会对用户输入的账户信息进行验证，如果信息正确则会跳转到系统的首页，因此这里已经实现了设置链接。
2. 第二步的设置容器也是使用根组件App.vue中设置的容器，因此无需多加配置
3. 第三步则是要创建我们的首页组件
4. 第四步配置路由信息
5. 第五步实例化路由并使用路由配置

4 普通组件

一般地，系统布局分为页眉、菜单栏、内容展示区、页脚等几大模块，普通组件一般是在内容展示区进行加载的

1. 第一步的设置链接是在成功登录系统后的首页菜单栏实现的，点击不同的菜单切换到不同的组件
2. 第二步的设置容器是在是在首页组件中进行设置的，在首页布局的内容展示区设置一个容器
3. 第三步创建组件
4. 第四步配置组件的路由信息
5. 第五步的实例化路由并使用路由