首页 > 代码库 > [Vue] Get up and running with vue-router
[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?
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] Get up and running with vue-router
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。