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({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- 自己动手写Redis客户端(C#实现)4 - 整数回复
整数回复 整数回复就是一个以 ":" 开头, CRLF 结尾的字符串表示的整数. 比如说, ":0\r\n" 和 ":1000\r\n" 都 ...
- spark2.2 DataFrame的一些算子操作
Spark Session中的DataFrame类似于一张关系型数据表.在关系型数据库中对单表或进行的查询操作,在DataFrame中都可以通过调用其API接口来实现.可以参考,Scala提供的Dat ...
- 3255:十进制到六进制-poj
3255:十进制到六进制 总时间限制: 1000ms 内存限制: 65536kB 描述 进制转换: 将十进制(不超过int类型表示的范围)的数转换为六进制的数. 输入 输入为第一行是组数n,后面n ...
- javaWeb开发中关于eclipse等ide重新部署或重启项目等原因造成上传文件丢失问题解决方案
在开发项目时,有时候需要用到上传功能,比如头像上传等,其文件会保存到服务器中.但是我发现在用eclipse做项目的过程中,每次重新部署项目,原来上传的文件就会丢失. 其原因是因为每次项目修改后,ecl ...
- SPOJ SERGRID - Grid BFS
SERGRID - Grid no tags You are on an nxm grid where each square on the grid has a digit on it. From ...
- SpringCloud高可用Eureka搭建
网上很多博客写的都是在本地一台机器上面搭建的,我用两台机器来为大家搭建一个注册中心高可用集群 第一步:需要在每一台机器上面搭建一个注册中心. 第二步:编写第一台机器注册中心配置文件 第三步:编写第二台 ...
- c++简单编写线性表(实验)
哇 好久没更博客了 因为从上次更文到现在为止,我一直在学c#,然后也觉得没什么太大的东西想写在博客上, 总之这次就简单的传一下学校安排的数据结构的实验,我还是学生,是新手,希望能继续跟大家一起学习, ...
- 简单用数组模拟顺序栈(c++版)适合新手
**栈是一种操作受限制的线性表,太多官方的话我也不说了,我们都知道栈元素是先进后出的,它有两种存储结构,分别是顺序存储结构和链式存储结构. **今天我先记一下顺序存储结构,后面我会加上链式存储结构的. ...
- SFTP工具类 操作服务器
package com.leadbank.oprPlatform.util;import com.jcraft.jsch.*;import com.jcraft.jsch.ChannelSftp.Ls ...
- 免费靠谱的 Let’s Encrypt 免费 https 证书申请全过程
申请 Let’s Encrypt证书的原因: 现在阿里云等都有免费的 https 证书,为什么还要申请这个呢(估计也是因为阿里云这些有免费证书的原因,所以 Let’s Encrypt 知道的人其实并不 ...