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 ...
随机推荐
- Page 实例的生命周期
注册页面 · 小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
- UVALive3989 Ladies' Choice —— 稳定婚姻问题 Gale - Shapely算法
题目链接:https://vjudge.net/problem/UVALive-3989 题解: 题意:有n个男生和n个女生.每个女生对男神都有个好感度排行,同时每个男生对每个女生也有一个好感度排行. ...
- hadoop-3.0.0-alpha4安装部署过程
关闭防火墙 #systemctl stop firewalld.service #停止firewall #systemctl disable firewalld.service #禁止firewall ...
- MkDocs -- Project documentation with Markdown
/************************************************************************ * MkDocs -- Project docume ...
- Linux CentOS 6.5中安装与配置Tomcat-8方法
安装环境:CentOS-6.5 安装方式:源码安装 软件:apache-tomcat-8.0.0.RC3.tar.gz 下载地址:http://tomcat.apache.org/download-8 ...
- hdu5475(线段树单点修改，统计区间乘积)
题目意思: 给定a*b*c*d*e*f*....,可以在某一步去掉前面的一个因子,每次回答乘积. #include <cstdio> #include <cstring> #i ...
- python3 + selenum 环境搭建
一.安装python3 打开python3官网https://www.python.org/,选择下载相应平台版本. 下载完成之后,根绝需要安装.注意:在安装时需勾选左下角“add python to ...
- Ruby Time类和Date类
Time类 更新: 2017/06/23 更新了Data/Time在model模式下的便利方法 更新: 2018/10/12 修改了%Y相关描述防止误解 年月日时分秒,时区 生成 获取当前时 ...
- postgresql数据库基本信息查看
切换至postgresql数据库用户pguser 或 postgres(根据自己实际情况) 1. SELECT version(); 2.对的 2. 查看数据库大小: SELECT pg_size ...
- Luogu P1195/P1892 口袋的天空/BOI团伙 【最小生成树/并查集】By cellur925
其实这俩题挺水的,团伙拿下了一血,但是感觉还是写一下博客比较好x. 一.团伙 题目描述 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是 ...