vue-router的参数的传递、懒加载以及嵌套路由的使用

1.安装一个带路由配置的项目

2.配置一个起步路由

我们打开router文件夹下的index.js文件，关于路由的配置都在该文件进行配置。

a.为了完全弄懂该文件代码，我们先清空文件内容，再手写一个配置文件：

b.由于我们需要使用路由那么先在文件导入路由插件：

import VueRouter from "vue-router";

c.导入之后，插件是需要使用的，而vue提供了使用插件的方法，因此也需要导入Vue：

import Vue from "vue";

Vue.use(VueRouter);

d.使用插件创建router实例：

const router = new VueRouter({
   
  routes: routes
});

在创建实例中传入一些配置的options，其中routes是配置了路由映射的数组。

e.由于router实例需要用来配置在Vue实例中，因此需要导出router实例：

export default router;

f.为了实现路由跳转,我们须在components文件夹中创建两个组件：

组件内容：

//About.vue

<template>
  <h1>我是关于组件</h1>
</template>

<script>
export default {
   };
</script>

<style>
h1 {
   
  color: yellow;
}
</style>

//Home.vue
<template>
  <h1>我是Home组件</h1>
</template>

<script>
export default {
   };
</script>

<style>
h1 {
   
  color: red;
}
</style>

g.在路由配置文件中配置映射关系：

import Home from "../components/Home";
import About from "../components/About";

const routes = [
  {
   
    path: "/home",
    component: Home
  },
  {
   
    path: "/about",
    component: About
  }
];

h.路由已经配置好了，下面使用组件:

在App.vue中使用路由：

<template>
  <div id="app">
    <router-link to="/home" tag="button">主页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
    
  name: "App",
};
</script>

解释：

• < router-link > 该标签一个vue-router中已经内置的组件，默认它会渲染成一个< a >标签
• < router-view >该标签会根据当前路径，动态渲染出不同的组件，在路由切换时，切换的是它挂载的组件，其它内容不会发生改变

i.运行项目测试路由跳转：

到这里，最简单的路由已经实现了。

简单小结：

• 创建路由组件
• 配置路由映射：组件与路径映射的关系
• 使用路由：< router-link >和< router-view >