VueRouter入门

AlightYoung 6/11/2020 Vue

在了解Vue Router之前,先简单介绍以下Vue CLI.

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.在3.0之后提供了ui管理页面,你可以借此轻松创建一个基于vue的项目脚手架并进行管理.

# 创建项目

在创建项目之前,你需要先安装vue cli.

npm install -g @vue/cli
# 查看版本
vue --version

1
2
3

安装完成之后,便可以进行项目的初始化

vue create hello-world
# or
vue ui #推荐 基于ui还可以进行项目的启动,管理与监控

1
2
3

然后就可以先熟悉一下项目结构

src/下的结构

components 功能组件

router 路由配置

store vuex的store配置

view 页面组件

接下来你就可以在router/index.js进行路由的相关配置

# 路由配置

通过vue cli默认会生成该路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
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({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

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

通过配置routers,即可实现路由到的组件.

然后再app.vue配置router view用于渲染具体路由的组件,以下是默认生成的app.vue

<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>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

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

至此,一个最简单的路由功能便实现了

继续深入了解--->官方文档 (opens new window)

A·Y

Choose mode