[Vue] Get up and running with vue-router
Vue and with get Router Up running
2023-09-14 09:00:52 时间
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>
相关文章
- 手把手教你从零写一个简单的 VUE
- 使用 Vuex + Vue.js 构建单页应用
- This dependency was not found: * !!vue-style-loader!css-loader?……解决方案
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- vue axios的使用
- Vue命名规范
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
- vue.js3:解析xml (x2js@3.4.3 / vue@3.2.37)
- 计算机毕设 SSM Vue的旅游信息发布管理系统(含源码+论文)
- 215:vue+openlayers 使用new WFS加载数据,通过like,and,equalTo来过滤数据
- 211:vue+openlayer: 矢量图形的剪切、复制和粘贴
- 075:vue+openlayers: Drag-and-Drop拖拽文件解析显示图形(代码示例)
- Electron + Vue 实现输入法自动刷字数