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的更多相关文章

  1. [Vue] Vue2 + @vue/composition-api 的一个坑

    Vue2 + @vue/composition-api 和 Vue3 composition api 不一致的地方(待验证) <div v-for="item in arr" ...

  2. vue2,vue指令和选项

    vue特点 mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集 ...

  3. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  4. vue3与vue2的区别

    全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...

  5. Vue基础二之全局API、实例属性和全局配置,以及组件进阶(mixins)的详细教程(案列实现,详细图解,附源码)

    本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...

  6. 【vue3】封装自定义全局插件

    [vue3]封装自定义全局插件 原vue2方法 main.js import Vue from 'vue' import App from './App.vue' import router from ...

  7. vue-cli4脚手架搭建一

    涉及内容 html  css   javascript   node.js   npm    webpack 2.9.6是常用版本 vue-cli4是基于webpack的 webpack是基于node ...

  8. [vue最新实战] gank客户端(vue2 + vue-router2 + vuex +webpace + es6)新手福利,干货多多

    vue-meizi 本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程.代码简单易懂,注释多多.实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待.先发布预览版本,后面更多更全的功能和 ...

  9. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  10. 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

随机推荐

  1. 自己动手写Redis客户端(C#实现)4 - 整数回复

    整数回复 整数回复就是一个以 ":" 开头, CRLF 结尾的字符串表示的整数. 比如说, ":0\r\n" 和 ":1000\r\n" 都 ...

  2. spark2.2 DataFrame的一些算子操作

    Spark Session中的DataFrame类似于一张关系型数据表.在关系型数据库中对单表或进行的查询操作,在DataFrame中都可以通过调用其API接口来实现.可以参考,Scala提供的Dat ...

  3. 3255:十进制到六进制-poj

    3255:十进制到六进制 总时间限制:  1000ms 内存限制:  65536kB 描述 进制转换: 将十进制(不超过int类型表示的范围)的数转换为六进制的数. 输入 输入为第一行是组数n,后面n ...

  4. javaWeb开发中关于eclipse等ide重新部署或重启项目等原因造成上传文件丢失问题解决方案

    在开发项目时,有时候需要用到上传功能,比如头像上传等,其文件会保存到服务器中.但是我发现在用eclipse做项目的过程中,每次重新部署项目,原来上传的文件就会丢失. 其原因是因为每次项目修改后,ecl ...

  5. 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 ...

  6. SpringCloud高可用Eureka搭建

    网上很多博客写的都是在本地一台机器上面搭建的,我用两台机器来为大家搭建一个注册中心高可用集群 第一步:需要在每一台机器上面搭建一个注册中心. 第二步:编写第一台机器注册中心配置文件 第三步:编写第二台 ...

  7. c++简单编写线性表(实验)

    哇 好久没更博客了  因为从上次更文到现在为止,我一直在学c#,然后也觉得没什么太大的东西想写在博客上, 总之这次就简单的传一下学校安排的数据结构的实验,我还是学生,是新手,希望能继续跟大家一起学习, ...

  8. 简单用数组模拟顺序栈(c++版)适合新手

    **栈是一种操作受限制的线性表,太多官方的话我也不说了,我们都知道栈元素是先进后出的,它有两种存储结构,分别是顺序存储结构和链式存储结构. **今天我先记一下顺序存储结构,后面我会加上链式存储结构的. ...

  9. SFTP工具类 操作服务器

    package com.leadbank.oprPlatform.util;import com.jcraft.jsch.*;import com.jcraft.jsch.ChannelSftp.Ls ...

  10. 免费靠谱的 Let’s Encrypt 免费 https 证书申请全过程

    申请 Let’s Encrypt证书的原因: 现在阿里云等都有免费的 https 证书,为什么还要申请这个呢(估计也是因为阿里云这些有免费证书的原因,所以 Let’s Encrypt 知道的人其实并不 ...