vue2 vue-rout
vue 2.0的路由比起1.0简单了许多,分为以下几个步骤;
1.创建路由块和视图块;
to里面是要切换的路径名称
<div id="app">
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
2.写组件
var Home={
template:'<h3>我是主页</h3>'
};
var News={
template:'<h3>我是新闻</h3>'
};
3、
//配置路由
var routes=[
{path:'/home', component:Home},
{path:'/news', component:News},
//重镜像,相当于是主页
{path:'*', redirect:'/home'}
];
4、创建路由实例
var router = new VueRouter({
routes :routes //routes是一个参数
})
5、
//最后挂到vue上
new Vue({
router,
el:'#box'
});
效果:
vue2 vue-rout的更多相关文章
- [Vue] Vue2 + @vue/composition-api 的一个坑
Vue2 + @vue/composition-api 和 Vue3 composition api 不一致的地方(待验证) <div v-for="item in arr" ...
- vue2,vue指令和选项
vue特点 mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集 ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- vue3与vue2的区别
全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...
- Vue基础二之全局API、实例属性和全局配置,以及组件进阶(mixins)的详细教程(案列实现,详细图解,附源码)
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- 【vue3】封装自定义全局插件
[vue3]封装自定义全局插件 原vue2方法 main.js import Vue from 'vue' import App from './App.vue' import router from ...
- vue-cli4脚手架搭建一
涉及内容 html css javascript node.js npm webpack 2.9.6是常用版本 vue-cli4是基于webpack的 webpack是基于node ...
- [vue最新实战] gank客户端(vue2 + vue-router2 + vuex +webpace + es6)新手福利,干货多多
vue-meizi 本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程.代码简单易懂,注释多多.实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待.先发布预览版本,后面更多更全的功能和 ...
- vue2.0实践 —— Node + vue 实现移动官网
简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- RecyclerView分割线——万能分割线
参照网络上众多的分割线设计方法,对方法进行调整和修改,最终完成的比较通用的RecyclerView分割线,底部会附上参考网址,大家可以去看一下. 在正文之前,先说一下个人看法:研究下来,我发现,其实最 ...
- Session、Cookie 学习笔记
在开始今天的博文之前首先为自己庆祝一下自己有了三个粉丝,也有了同僚的评论,说实话因为这个开心了好久!哈哈,好了在开始今天的正题之前,首先大家需要了解以下几点: a. HTTP 协议是无状态的协议,WE ...
- 爬起点小说 day01
先介绍下我自己爬起点小说的思路: 1.爬取所有的类型列表 a.链接存redis中 类型表:novel_list 具体每一种类型:bnovel_all_list(把novel_list和bnovel_l ...
- Linux多进程编程实例
前言:编写多进程程序时,我们应该了解一下,创建一个子进程时,操作系统内核是怎样做的.当通过fork函数创建新的子进程时,内核将父进程的用户地址空间的内容复制给子进程,这样父子进程拥有各自独立的用户空间 ...
- windows MySQL 5.6.38 安装步骤
文章转载于此出 mysql5.6.38 1067错误 可能是自己添加 了my.ini文件 其实不需要添加这个文件,直接在mydefault.ini中修改就行了 mysql 5.6 zip解压安装配置( ...
- Sun 与 Oracle 合并的未来
引言 SUN 2008 初 10 亿美元收购 MySQL Oracle 2009 年 4 月 74 亿美元收购 SUN Sun 与 Oracle 合并的未来 1,如果云计算对企业来说变得越来越重要,那 ...
- iscroll使用之页面卡顿问题
最近在开发项目时,遇到一个问题,使用iscroll实现的页面滚动,测试时发现在chrome浏览器中的模拟移动设备页面不能平滑滚动,有卡顿现象,在android手机端也有同样的问题. 在github上搜 ...
- Spring3.0官网文档学习笔记(二)
1.3 使用场景 典型的成熟的spring web应用 spring使用第三方框架作为中间层 远程使用场景 EJB包装 1.3.1 依赖管理.命名规则(包) spring-*.jar *号代表 ...
- Android应用开发allowBackup敏感信息泄露的一点反思
1 背景 [工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 事实上这篇文章可能有些小题大作,但回过头想想还是非常有必要的,有点阴沟里翻船的感觉. ...
- struts2捕获action类异常
首先是STRUTS.XML的配置.重点在于配置文件: <!-- struts2捕获action类异常 --> <global-results> <resu ...