Vue-cli项目中路由的基础用法，以及路由嵌套

柔情只为你懂 2021-09-15 22:24 342阅读 0赞

**文件目录：**

![70][]

### **编辑router文件夹下的index.js文件** ###

**· ****第一步：引用vue和vue-router ，Vue.use（VueRouter）**

/* eslint-disable*/
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)

**·****第二步：引用定义好的路由组件**

import ChildOne from '../components/childOne'
    import ChildTwo from '../components/childTwo'

**·****第三步：定义路由（路由对象包含路由名、路径、组件、参数、子路由等），每一个路由映射到一个组件**

**·****第四步：通过new Router来创建router实例**

export default new Router({
        routes: [
        {
            path: '/one',
            name: 'ChildOne',
            component: ChildOne
        },
        {
            path: '/two',
            name: 'ChildTwo',
            component: ChildTwo
        }
        ]
    })

### **在****main.js文件上编辑** ###

**·****第五步：在main.js中将路由实例挂载到vue根实例上，使得整个应用都有路由功能，如下**

import router from '../src/router/index.js'
    new Vue({
        el: '#app',
        router,
        components: { App },
        template: '<App/>'
    })

### **在组件****文件上使用路由，编辑app.vue** ###

**·****第****六****步：在****组件****中****使用****router-link 标签实现跳转路由、使用router-view来实现路由显示****，如下**

<template>
        <div id="app">
            <div><img src="./assets/logo.png"></div>
            <router-link to="/one">显示第一个页面</router-link>
            <router-link to="/two">显示第二个页面</router-link>
            <router-view></router-view>
        </div>
    </template>

该demo中的childOne.vue组件文件

<template>
        <div style="border:1px solid blue;color:blue">
            <p>这是子组件1的内容!!!</p>
            <p>!!!这是第1个路由的页面!!!</p>
        </div>
    </template>

childTwo.vue组件文件

<template>
        <div style="border:1px solid blue;color:blue">
            <p>这是子组件2的内容</p>
            <p>这是第二个路由显示的页面怎么样</p>
        </div>
    </template>

**注意：在组件中可以使用this.$router访问路由器，可以使用this.$route访问当前路由；**

实现效果：

![70 1][]

### 路由嵌套： ###

**使用方法：在router/index.js中定义路由对象时，使用children:\[\{...\},\{...\}\]的形式设置下级路由及映射组件，如下在one路由下设置了log和reg路由**

export default new Router({
      routes: [
        {
          path: '/one',
          name: 'ChildOne',
          component: ChildOne,
          children:[
            {
              path:'log',
              component:Log,
            },
            {
              path:'reg',
              component:Reg,
            },
          ],
        },
        {
          path: '/two',
          name: 'ChildTwo',
          component: ChildTwo
        }
      ]
    })

**childOne.vue中使用二级路由**

<template>
      <div style="border:1px solid red;color:red;">
        <p>这是子组件1的内容</p>
        <p>下面开始点击显示嵌套的子路由 </p>
        <router-link to="/one/log">显示登录页面</router-link>
        <router-link to="/one/reg">显示注册页面</router-link>
        <router-view></router-view>
      </div>
    </template>

![70 2][]

[70]: /images/20210726/9b98e99e8cb8413fb117602836552648.png
[70 1]: /images/20210726/dd3110e234f64cd0980fa854b7dfe5e9.png
[70 2]: /images/20210726/e66b0685201a4d959a5931cd254756a2.png