开始

 

很自然地使用 Vue 和 vue-router 创建单页应用，当添加 vue-router 到混合器中时，我们已经使用组件组合我们的应用，我们需要做的就是将组件跟路由映射，让路由知道如何渲染他们，这里有一个简单的例子：

 

router-link

 

注意，我们使用自定义组件router-link来创建链接，而不是使用常规的a标记。这允许Vue路由器改变URL而无需重新加载页面，处理URL生成以及它的编码。稍后我们将看到如何从这些特性中获益。

 

router-view

 

router-view将显示对应于url的组件。你可以把它放在任何地方，以适应您的布局。

 

html

 

首先我们现在 src/views 创建两个页面：

 

Home.vue：

 

<template>

 

    <div class="home-wrap">

 

        home

 

    </div>

 

</template>

 

<script>

 

export default {

 

    name: 'Home',

 

    data: () => {

 

        return {

 

        }

 

    }

 

}

 

</script>

 

About.vue：

 

<template>

 

    <div class="about-wrap">

 

        about

 

    </div>

 

</template>

 

<script>

 

export default {

 

    name: 'About',

 

    data: () => {

 

        return {

 

        }

 

    }

 

}

 

</script>

 

在 src/router/index.js 添加对应的路由：

 

import { createRouter, createWebHistory } from 'vue-router'

 

const routes = [

 

  {

 

    path: '/about',

 

    name: 'About',

 

    component: () => import('../views/About.vue'),

 

    meta: {

 

      title: '关于'

 

    }

 

  },

 

  {

 

    path: '/home',

 

    name: 'Home',

 

    component: () => import('../views/Home.vue'),

 

    meta: {

 

      title: '首页'

 

    }

 

  }

 

]

 

const router = createRouter({

 

  history: createWebHistory(process.env.BASE_URL),

 

  routes

 

})

 

export default router

 

在 src/App.vue 添加 router-link，router-view：

 

<template>

 

  <router-link to="/home">Go to Home</router-link>

 

  <router-link to="/about">Go to About</router-link>

 

  <router-view/>

 

</template>

 

<style>

 

#app {

 

  font-family: Avenir, Helvetica, Arial, sans-serif;

 

  -webkit-font-smoothing: antialiased;

 

  -moz-osx-font-smoothing: grayscale;

 

  text-align: center;

 

  color: #2c3e50;

 

}

 

#nav {

 

  padding: 30px;

 

}

 

#nav a {

 

  font-weight: bold;

 

  color: #2c3e50;

 

}

 

#nav a.router-link-exact-active {

 

  color: #42b983;

 

}

 

</style>