[Vue] Get up and running with vue-router

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/6371567.html

文章标签：

#javascript #ViewUI

本文介绍如何使用vue-router在Vue.js项目中设置简单的应用程序，并为其定义不同的路由及组件。通过安装vue-router并配置路由，可以轻松实现页面间的导航。文章还展示了如何在模板中设置导航链接以实现不同语言页面的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

How do we set up a simple app with its own routes with their own components in Vue?

Install:

npm i --save vue-router

Define routers:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Armenian from '../components/Armenian.vue'
import Chinese from '../components/Chinese.vue'
import Greek from '../components/Greek.vue'

export default new Router({
  mode: 'history',
  routes: [{
    path: '/armenian',
    component: Armenian
  }, {
    path: '/chinese',
    component: Chinese
  }, {
    path: '/greek',
    component: Greek
  }]
})

Navgiation:

<template>
  <div id="app">
    <header>
      <router-link to="/" exact>Lorem Ipsum in different languages</router-link>
    </header>
    <nav>
      <ul>
        <li>
          <router-link to="/armenian">Armenian</router-link>
        </li>
        <li>
          <router-link to="/chinese">Chinese</router-link>
        </li>
        <li>
          <router-link to="/greek">Greek</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  .router-link-active {
    color: turquoise
  }
</style>