[Vue] Get up and running with vue-router

太过爱你忘了你带给我的痛 2022-03-30 08:50 130阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 进阶 [五] 手写VueRouter

> 人生当自勉，学习需坚持。定义 Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

梦里梦外;/ 2022年12月10日 03:52/ 0 赞/ 241 阅读

相关 Run Android apps in Windows, OS X, Linux with Chrome (and a modified runtime)

2014-09-19 22:16:39 Google has begun [bringing Android apps][] to the Chrome Web Sto

你的名字/ 2022年09月25日 08:19/ 0 赞/ 119 阅读

相关 Qlik Sense Repository Back up and Restore

For all steps please see the official document , we only taking backup for the Qlik Sens

刺骨的言语ヽ痛彻心扉/ 2022年09月13日 05:18/ 0 赞/ 14 阅读

相关 R and SAS in the curriculum: getting students to "think with data"

We’re pleased to announce that a special issue of the American Statistician on “Statisti

你的名字/ 2022年08月19日 08:45/ 0 赞/ 15 阅读

相关 Get data out of excel and into R with readxl

(This article was first published on [RStudio Blog][], and kindly contributed to [R-blo

待我称王封你为后i/ 2022年08月07日 14:47/ 0 赞/ 207 阅读

相关导入mvn或者转成mvn后出现错误：Project configuration is not up-to-date with pom.xml. Run project configuration up

在导入一个Maven项目之后发现有一个如下的错误： Project configuration is not up-to-date with pom.xml. Run pro

╰半橙微兮°/ 2022年08月06日 09:08/ 0 赞/ 158 阅读

相关 DescriptionResourcePathLocationType Project configuration is not up-to-date with pom.xml. Run Ma

完整错误信息： DescriptionResourcePathLocationType Project configuration is not up-to-date

谁借莪１个温暖的怀抱￠/ 2022年06月16日 00:13/ 0 赞/ 163 阅读

相关 Time To Get Up——个人c++解

问题 K: Time To Get Up 时间限制: 2 Sec 内存限制: 128 MB 题目描述 Little Q's clock is alarm

╰半夏微凉°/ 2022年06月09日 22:41/ 0 赞/ 135 阅读

相关 [Vue] Get up and running with vue-router

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

太过爱你忘了你带给我的痛/ 2022年03月30日 08:50/ 0 赞/ 131 阅读

相关 vue-router源码浅显分析（一）--Vue.use(VueRouter), new VueRouter(options)，HashHistory

1，vue中使用vueRouter需要通过vue.use(vueRouter)，众所周知，这里实际上调用了VueRouter的install方法，对Vue进行了扩展，vueR

朴灿烈づ我的快乐病毒、/ 2022年03月18日 08:44/ 0 赞/ 375 阅读