vue-router 创建 vue 单页应用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="/css/style.css">
<script src="/js/vue.min.js"></script>
<script src="/js/vue-router.min.js"></script>
</head>
<body>
<h1>Vue Router</h1>
<div id="box">
<router-link to="/home">Home</router-link>
<router-link to="/news">News</router-link>
<div>
<router-view></router-view>
</div>
</div>
</body>
</html>
<script>
// define component
const Home = {
template: '<h2>I am the homepage</h2>'
}
const News = {
template: '<h2>I am the newspage</h2>'
}
// define router
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News }
]
// create router instance & config routes
const router = new VueRouter({
routes
// routes: routes
})
const app = new Vue({
router
}).$mount('#box')
</script>
点击 Home 标签
点击 News 标签
通过开发者工具可以看到，router-link 标签被解析成了a标签， router-view 标签被 组件的模板内容替换。
当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。
参考：http://router.vuejs.org/zh-cn/essentials/getting-started.html
vue-router 创建 vue 单页应用示例的更多相关文章
- [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案（以Apache为例）
vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...
- vue ui 创建vue项目 没反应的解决办法 2021
1.升级vue 脚手架 即可 2.再 vue ui 创建项目 cnpm i -g @vue/cli
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- vue中创建全局单文件组件/命令
1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...
- vue项目中，单页图片过多，使用懒加载
最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...
- 偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道
封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来.第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 ——html—— <script t ...
- vue router返回上一页
this.$router.go(-1) 不用router时,使用window.history.go(-1);
随机推荐
- Quartz资源收藏
项目中使用Quartz集群分享 : http://hot66hot.iteye.com/blog/1726143 发布 Quartz Job Scheduling Framework 中文 PDF 版 ...
- 【转】Caffe初试（四）数据层及参数
要运行caffe,需要先创建一个模型(model),如比较常用的Lenet,Alex等,而一个模型由多个层(layer)构成,每一层又由许多参数组成.所有的参数都定义在caffe.proto这个文件中 ...
- Swift - UIColor16进制编码与RGB格式互相转换
Swift UIColor 16进制编码转换RGB : 由于UI出图的时候,通常给的是16进制的编码颜色,我们在开发的时候需要将它转换为RGB格式,现在给出两种代码片段. 一.对UIColor进行扩展 ...
- HTTP POST请求报文格式分析与Java实现文件上传
时间 2014-12-11 12:41:43 CSDN博客 原文 http://blog.csdn.net/bboyfeiyu/article/details/41863951 主题 HTTPHt ...
- 【Mybatis架构】输入、输出映射
前言综述: 其实在我们分析Mybatis的查询缓存或者是一些简介的时候,我们就不难看到有关于Mybatis输入输出映射的东西,比如说: 但是一直没有想起来系统的来总结一下这方面的相关知识,偶然看到 ...
- 关于POI解析Excel文件（03和07版本不同）的问题
问题描述:在使用poi包进行excel解析时,发现对Excel2003以前(包括2003)的版本没有问题,但读取Excel2007时发生如下异常:org.apache.poi.poifs.filesy ...
- android--gradle编译龟速？offline！
- 【BO】为WEBI报表添加自定义字体font
本篇主要讲解如何为sap business objects 的web intelligence报表组件新增字体.因为系统默认预设的字体对中文而言实在是太丑了,有的字体特喵的直接把中文变成方框框了! 一 ...
- 【NOIP考前模拟赛】纯数学方法推导——旅行者问题
一.写在前面 这题似乎是一道原创题目(不是博主原创),所以并不能在任何OJ上评测,博主在网盘上上传了数据(网盘地址:http://pan.baidu.com/s/1mibdMXi),诸位看官需者自取. ...
- 概率DP
POJ 3744 Scout YYF I 这就是一个乱搞题,暴力发现TLE了,然后看了看discuss里说可以矩阵加速,想了一会才想明白怎么用矩阵,分着算的啊.先算f[num[i]-1]之类的,代码太 ...