【Vue】2.vue2.0路由及路由嵌套

ゞ浴缸里的玫瑰 2022-06-05 03:39 323阅读 0赞

**一、创建项目**

这里用vue-cli创建项目，创建过程可以参考[vue-cli快速构建项目][vue-cli]，创建完成后生成如下工程目录：

**二、项目目录**

![Center][]

**三、配置路由Router**

在项目创建的过程中，Install vue-router? 如果选择了Yes，项目目录的src下就会自动生成一个router的文件夹，index.js就是vue-cli自动构建的router的配置文件，路由设置就在这里面配置，但如果创建项目的时候，选择了no，就不会自动生成router文件夹，就需要手动创建，然后进行配置。

![Center 1][]

用vue-cli创建项目的初始模板里面，node\_modules文件夹下如果没有vue-router,需要重新npm安装

npm install vue-router --save

如下是router的配置文件信息：mode:'history' 是让浏览器记住url路径，前进和后退能够记住历史信息，redirect是设置路由的默认显示，子路由通过children来设置。

（1）src/router/index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import Apple from '@/components/apple'
    import Banana from '@/components/banana'
    import Apple1 from '@/components/Apple1'
    import Apple2 from '@/components/Apple2'
    
    Vue.use(Router)
    
    export default new Router({
      mode:'history',
      routes: [
        {
          path: '/',
          redirect: 'helloworld' 
        },
        {
          path: '/helloworld',  //path为路径
          name: 'HelloWorld',   //name配置名字，这个name是跟对应的.vue中的name相对应
          component: HelloWorld
        },
        {
          path: '/apple',
          name: 'Apple',
          component: Apple,
          children:[
            {
              path:'apple1',
              name:'Apple1',
              component:Apple1
            },
            {
              path:'apple2',
              name:'Apple2',
              component:Apple2
            }
          ]
        },
        {
          path: '/banana',
          name: 'Banana',
          component: Banana
        }
      ]
    })

（2）src/App.vue

<template>
      <div id="app">
        <div>
          <img src="./assets/logo.png">
        </div>
        <div>
          <router-view></router-view>
        </div>
        <div>
          <router-link :to="{path:'/apple'}">Apple</router-link>
          <router-link :to="{path:'/banana'}">Banana</router-link>
          <router-link :to="{path:'/helloworld'}">HelloWorld</router-link>
        </div>
    
      </div>
    </template>
    
    <script>
    export default {
      name: 'app'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

（3）src/components/apple.vue

<template>
        <div>
          <div>
            {
       {msg}}
          </div>
          <div>
            <router-view></router-view>
          </div>
          <div>
            <router-link :to="{path:'/apple/apple1'}">apple1</router-link>
            <router-link :to="{path:'/apple/apple2'}">apple2</router-link>
          </div>
        </div>
    </template>
    
    <script>
        export default{
            name:'Apple',  //跟路由里面的配置相对应
            data(){
                return {
                    msg: 'hello apple'
                }
            }
        }
    </script>
    
    <style>
    </style>

效果如下图所示：

![Center 2][]

[vue-cli]: http://blog.csdn.net/benben513624/article/details/78486441
[Center]: /images/20220605/81656985b6144fb087daa11edbe565db.png
[Center 1]: /images/20220605/4435b192de3246b8b0865e9729db484f.png
[Center 2]: /images/20220605/b245d8179dc34679a5d5d38ad0096d8c.png