Vue-cli4——vue-router路由

Vue-cli4——vue-router路由（一）

Day1

---

---

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

@vue/cli 4.5.8

一、代码解析

当你安装完以后，你会看到有着几个目录，route文件夹是放路由配置文件，而components是放组件，views是放页面。其他的不用管，用不到。

1.1 src/router/index.js

第一步我们先来，分析src/router/index.js代码，我们先分段解释。

导入view文件夹里面的Home.vue为Home

import Home from '../views/Home.vue'

设置组件和路径映射关系
第 3 行：路径为 / 。
第 5 行：组件(component)为刚刚 import 进来的 Home 。

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: function () {
   
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  }
]

将刚刚设置的 组件和路径映射 关系(routes)给到router

const router = createRouter({
   
  history: createWebHistory(process.env.BASE_URL),
  routes
})

最后将router导出

export default router

1.2 src/App.vue

使用router-link标签，显示

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

二、实例

2.1 简单的实例

router-view 是决定模板渲染位置
App.vue

<template>
  <div id="nav">
    <router-link to="/test1">test1</router-link> |
    <router-link to="/test2">test2</router-link>
  </div>
  <router-view/>
</template>

components/test1.vue

<template>
  <div>
    <h2>我是测试1</h2>
    <h2>我是测试1</h2>
  </div>
</template>

components/test2.vue

<template>
  <div>
    <h2>我是测试2</h2>
    <h2>我是测试2</h2>
  </div>
</template>

couter/index.js

import test1 from '../components/test1'
import test2 from '../components/test2'

const routes = [
  {
   
    path: '/test1',
    name: 'test1',
    component: test1
  },
  {
   
    path: '/test2',
    name: 'test2',
    component: test2
  }
]

App.vue

<template>
  <div id="nav">