[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的更多相关文章
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- 去掉 vue 的 "You are running Vue in development mode" 提示
去掉 vue 的 "You are running Vue in development mode" 提示 在项目的 main.js 中已经配置了 Vue.config.produ ...
- 全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)
全栈的自我修养: 环境搭建 Not all those who wander are lost. 彷徨者并非都迷失方向. Table of Contents @ 目录 前言 环境准备 nodejs v ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- vue生成路由实例, 使用单个vue文件模板生成路由
一.vue-loader与vue-router配合 $ cnpm install vue-router --save 二.生成vue-webpack模板 $ vue init webpack-simp ...
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- Vue系列(2):Vue 安装
前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- [Vue + TS] Using Route events inside Vue
vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...
随机推荐
- HDU 3232 && UVA 12230 (简单期望)
Crossing Rivers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Light OJ 1373 Strongly Connected Chemicals 二分匹配最大独立集
m种阳离子 n种阴离子 然后一个m*n的矩阵 第i行第j列为1代表第i种阴离子和第j种阴离子相互吸引 0表示排斥 求在阳离子和阴离子都至少有一种的情况下 最多存在多少种离子能够共存 阴阳离子都至少须要 ...
- color-在framwork中添加属性变量
1.今天在修改framwork中的代码的时候,需要把自己在代码中写的一个#ffffff,变成在xml中引用的变量.具体操作方法如下 1)在 frameworks/base/core/res/res/v ...
- php网站修改为https后curl报错301
今日测试项目时需调用post模拟传参测试接口是否可用,但返回报错信息(301永久迁移),在网上搜寻解决办法无果,最后发现只要将跳转地址修改为https://+url的形式就可以了
- cdn缓存
1:缓存是什么? 首先.看看没有站点没有接入CDN时.用户浏览器与server是怎样交互的: 假设中间加上一层CDN,那么用户浏览器与server的交互例如以下: client浏览器先检查是否有本地缓 ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- SSMM框架
IDEA搭建SSMM框架(详细过程) 相关环境 Intellij IDEA Ultimate Tomcat JDK MySql 5.6(win32/win64) Maven (可使用Intellij ...
- Ten ways to improve the performance of large tables in MySQL--转载
原文地址:http://www.tocker.ca/2013/10/24/improving-the-performance-of-large-tables-in-mysql.html Today I ...
- oled模块的驱动芯片和pcb图
参考自:http://blog.sina.com.cn/s/blog_57ad1bd20102wtq8.html oled的驱动芯片是:SSD1306驱动芯片,这个芯片嵌入在屏幕里面,从外面看不出来, ...
- Docker使用Dockerfile创建Centos(tomcat+jdk)镜像
原文链接:https://blog.csdn.net/qq_37936542/article/details/80824389 Docker构建镜像的方法主要有两种: (1)使用docker c ...