Vue.js 使用vue-router替换父级视图与子路由

在本文中，我们将介绍如何使用Vue.js和vue-router来替换父级视图与子路由。vue-router是Vue.js官方的路由管理器，可以帮助我们构建SPA（单页应用）。

什么是vue-router

vue-router是Vue.js官方的路由管理器，用于构建单页应用。它可以将不同的URL映射到不同的组件，实现页面之间的无刷新切换和状态的保存。通过vue-router，我们可以在Vue.js中实现路由功能，将不同的组件关联到不同的URL路径上。

如何安装vue-router

要使用vue-router，我们首先需要通过npm或yarn安装它。在项目的根目录下运行以下命令进行安装：

npm install vue-router
# 或者
yarn add vue-router

安装完成后，我们需要在Vue.js的入口文件中引入vue-router，并通过Vue.use()方法启用它。在main.js文件中添加以下代码：

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

Vue.use(VueRouter)

创建父级视图和子路由

在使用vue-router替换父级视图与子路由之前，我们首先要创建父级视图以及子路由。

在Vue.js中，我们通过定义组件来创建视图。首先，创建一个父级组件，例如Home.vue：

<template>
  <div>
    <h1>首页</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

在父级组件中，我们使用标签来显示子组件，子组件将会替换这里的内容。

接下来，创建两个子组件，例如About.vue和Contact.vue：

<template>
  <div>
    <h2>关于我们</h2>
    <p>这是关于我们页面的内容。</p>
  </div>
</template>

<script>
export default {
  name: "About"
}
</script>

<template>
  <div>
    <h2>联系我们</h2>
    <p>这是联系我们页面的内容。</p>
  </div>
</template>

<script>
export default {
  name: "Contact"
}
</script>

然后，我们需要在vue-router中定义路由。在main.js文件中添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

使用vue-router替换父级视图与子路由

现在，我们已经定义了父级视图和子路由，接下来我们可以在父级视图中替换子路由了。

首先，我们需要在父级视图中定义路由链接。在Home.vue文件中添加以下代码：

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/contact">联系我们</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

通过使用标签，我们可以创建一个链接，点击链接后会切换到对应的子路由。

接下来，我们需要在子路由中定义组件。在About.vue和Contact.vue文件中添加以下代码：

<template>
  <div>
    <h2>关于我们</h2>
    <p>这是关于我们页面的内容。</p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "About"
}
</script>

<template>
  <div>
    <h2>联系我们</h2>
    <p>这是联系我们页面的内容。</p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Contact"
}
</script>