标签:ade app class span com avg port efault head
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
标签:ade app class span com avg port efault head
原文地址:http://www.cnblogs.com/Answer1215/p/6371567.html