vue2.0 路由知识一(路由的创建的全过程)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
<script src="../vue-router2.1.js"></script>
</head>
<body>
<div id="app">
<p>
<!--通过to属性指定链接-->
<!--<router-link>默认会被渲染成一个<a>标签-->
<router-link to="/home" tag="li">Home</router-link>
<router-link to="/about">About</router-link>
<hr/>
<!--<router-link :to="{path:'home'}">Home</router-link>
<router-link :to="'about'" tag="li">About</router-link>-->
</p> <!--路由出口，将路由匹配的组件渲染到这里-->
<!--将自动设置class属性值 .router-link-active-->
<router-view></router-view>
</div> <script>
//1.定义组件
const Home = {
template:"<div><h1>Home</h1><p>Hello,vue router!</p></div>"
} const About = {
template:"<div><h1>About</h1><p>这是关于vue-router</p></div>"
} //2.定义路由 (每个路由应该映射一个组件)
const routes = [{
path:"/home",
component:Home
},{
path:"/about",
component:About
},{
path:"/",
redirect:"/home"
/*component:Home*/
},{
path:"*",
redirect:"/home"//重定向
}
] //3.创建router实例 ，然后传‘routes’ 配置
const router = new VueRouter({
linkActiveClass:'active',
/*mode:"history",*/
routes // 相当于 routes:routes
}) //4.创建和挂载根实例，从而让整个应用都有路由功能
const vm = new Vue({
router //相当于 router:router
}).$mount("#app") </script>
</body>
</html>
vue2.0 路由知识一(路由的创建的全过程)的更多相关文章
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 路由知识 静态路由 rip eigrp ospf
第1章 路由选择原理 1.1 几个概念 1.1.1 被动路由协议 用来在路由之间传递用户信息 1.1.2 主动路由协议 用于维护路由器的路由表 R2#show ip route Codes: C - ...
- vue2.0 vue-cli项目中路由之间的参数传递
1.首先配置路由, import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new R ...
- vue2.0基础知识，及webpack中vue的使用
## 基础指令 ## [v-cloak]{ Display:none; } <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...
- vue2.0 之 douban （三）创建header组件
1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...
- vue2.0 之 douban （四）创建Swipe图片轮播组件
swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下, ...
- vue2.0 之 douban （二）创建自定义组件tabbar
1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...
- vue2.0 之 douban （五）创建cell,media-cell组件
1.组件cell 这里的cell分为三种样式,左侧带图标,不带图标,以及左侧带竖线的cell. 每一个组件都有一个底部边框: 这里我们采用了移动端1px像素问题的解决方法:父级元素设置相对定位,构建1 ...
随机推荐
- C项目案例实践（0）-语言基础
1.C语言数据类型 所谓数据类型是按被定义变量的性质.表示形式.占据存储空间的多少.构造特点来划分的.C中数据类型可分为基本数据类型.构造数据类型.指针类型.空类型4大类,结构如图: (1)基本数据类 ...
- 注册中心Eureka页面添加用户认证
我们需要登录即可访问到Eureka服务,这样其实是不安全的 为Eureka添加用户认证. 第一步,为itcast-microservice-eureka添加安全认证依赖: 第二步,增加applicat ...
- ubuntu php5.6源码安装
本系列的lnmp的大框架基本上是按照http://www.linuxzen.com/lnmphuan-jing-da-jian-wan-quan-shou-ce-si-lnmpda-jian-yuan ...
- hadoop-3.0.0-alpha4安装部署过程
关闭防火墙 #systemctl stop firewalld.service #停止firewall #systemctl disable firewalld.service #禁止firewall ...
- 四:多线程--NSOperation简单介绍
一.NSOperation简介 1.NSOperation的作⽤:配合使用NSOperation和NSOperationQueue也能实现多线程编程 NSOperation和NSOperationQu ...
- ModelAndView存取数Model、Map、ModelMap
1.从名字上看ModelAndView中的Model代表模型,View代表视图,这个名字就很好地解释了该类的作用.(对应mvc配置,寻找模型,返回视图.) 2.业务处理器调用模型层处理完用户请求后,把 ...
- bzoj 4596
4596: [Shoi2016]黑暗前的幻想乡 Time Limit: 20 Sec Memory Limit: 256 MBSubmit: 257 Solved: 152[Submit][Sta ...
- PCB 铜皮(Surface)折线多边形扩大缩小实现(第一节）
继续铜皮多边形的相关的算法, 如何用代码实现多边形的扩大与缩小,这部份内容准备分为四节内容来讲解, 第一节,折线多边形的扩大缩小(不包含圆弧) 此篇讲第一节 第二节,带圆弧的多边形的扩大缩小 第三 ...
- MHA高可用 MHA+Keepalive
MHA高可用 MHA简介 MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebo ...
- Ruby 动态生成变量
创建: 2018/03/21 更新: 2018/03/22 把标题ruby首字母大写 方法一: eval将字符串作为代码执行, 故写在里边 eval("@#{view_name.to_s} ...