路由的配置

1.手动配置路由index.js

首先需要在根目录下面新建一个router的文件夹，然后再文件夹内新建一个index.js的文件，建立完成后在index.js里面进行配置

        第一步：导入vue包以及vue-router包代码实现如下

import Vue from 'vue'
import VueRouter from 'vue-router'

第二步：创建vueRouter实例对象，在创建之前首先需要使用VueRouter代码实现如下

Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        { path:'',component:   }
    ],
})

第三步：向外共享路由的实例对象, 并在main.js的vue实例里面声明router = router 简写成router

export default router

以上完成就配置好了index.js

2.创建组件，实现组件之间的切换跳转

第一步：分别创建好各个组件这里以father与mother为例

father.vue

<template>
  <div class="father-container">
    <h6>father组件</h6>
    <p>我是father组件的内容</p>
    <hr />
  </div>
</template>

<script>
export default {
  name: 'Demo1Father',
}
</script>

<style lang="less" scoped></style>

mother.vue

<template>
  <div class="mother-container">
    <h6>mother组件</h6>
    <p>我是mother组件的内容</p>
    <hr />
  </div>
</template>

<script>
export default {
  name: 'Demo1mother',
}
</script>

<style lang="less" scoped></style>

App.vue

<template>
  <div class="app-container">
    <h4>App组件</h4>
    <hr />
  </div>
</template>

<script>
export default {
  name: 'Demo1App',
}
</script>

<style lang="less" scoped></style>

第二步：各组件写完后需要在app组件写好路由链接<router-link>以及路由占位符<router-view>

App.vue

<template>
  <div class="app-container">
    <h4>app组件</h4>
    <hr />
    <router-link">父亲</router-link>
    <router-link">母亲</router-link>
    <!-- 占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped></style>

第三步在index.js里面导入各组件并声明好路由链接指向  to='/哈希值'  以及router里面的对应关系，代码如下：

App.vue

<template>
  <div class="app-container">
    <h4>app组件</h4>
    <hr />
    <router-link to="/father">父亲</router-link>
    <router-link to="/mother">母亲</router-link>
    <!-- 占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped></style>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import father from '@/components/father.vue'
import mother from '@/components/mother.vue'

Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    { path: '/father', component: father },
    { path: '/mother', component: mother },
  ],
})

//向外面共享路由的实例对象
export default router

运行可以看到此时一进入的状态是两个组件都是默认是没有展示需要点击后才能展示，如果需要默认展示出内容，则需要在index.js里面重定向，代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import father from '@/components/father.vue'
import mother from '@/components/mother.vue'

Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    // 重定向
    { path: '/', redirect: 'father' },
    { path: '/father', component: father },
    { path: '/mother', component: mother },
  ],
})

//向外面共享路由的实例对象
export default router

此时需要注意的是path是根目录，redirect指重定向后面接重定向的组件名称，此时已进入会默认是展示了father组件