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. RecyclerView分割线——万能分割线

    参照网络上众多的分割线设计方法,对方法进行调整和修改,最终完成的比较通用的RecyclerView分割线,底部会附上参考网址,大家可以去看一下. 在正文之前,先说一下个人看法:研究下来,我发现,其实最 ...

  2. Session、Cookie 学习笔记

    在开始今天的博文之前首先为自己庆祝一下自己有了三个粉丝,也有了同僚的评论,说实话因为这个开心了好久!哈哈,好了在开始今天的正题之前,首先大家需要了解以下几点: a. HTTP 协议是无状态的协议,WE ...

  3. 爬起点小说 day01

    先介绍下我自己爬起点小说的思路: 1.爬取所有的类型列表 a.链接存redis中 类型表:novel_list 具体每一种类型:bnovel_all_list(把novel_list和bnovel_l ...

  4. Linux多进程编程实例

    前言:编写多进程程序时,我们应该了解一下,创建一个子进程时,操作系统内核是怎样做的.当通过fork函数创建新的子进程时,内核将父进程的用户地址空间的内容复制给子进程,这样父子进程拥有各自独立的用户空间 ...

  5. windows MySQL 5.6.38 安装步骤

    文章转载于此出 mysql5.6.38 1067错误 可能是自己添加 了my.ini文件 其实不需要添加这个文件,直接在mydefault.ini中修改就行了 mysql 5.6 zip解压安装配置( ...

  6. Sun 与 Oracle 合并的未来

    引言 SUN 2008 初 10 亿美元收购 MySQL Oracle 2009 年 4 月 74 亿美元收购 SUN Sun 与 Oracle 合并的未来 1,如果云计算对企业来说变得越来越重要,那 ...

  7. iscroll使用之页面卡顿问题

    最近在开发项目时,遇到一个问题,使用iscroll实现的页面滚动,测试时发现在chrome浏览器中的模拟移动设备页面不能平滑滚动,有卡顿现象,在android手机端也有同样的问题. 在github上搜 ...

  8. Spring3.0官网文档学习笔记(二)

    1.3 使用场景 典型的成熟的spring web应用 spring使用第三方框架作为中间层 远程使用场景 EJB包装 1.3.1 依赖管理.命名规则(包)     spring-*.jar *号代表 ...

  9. Android应用开发allowBackup敏感信息泄露的一点反思

    1 背景 [工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 事实上这篇文章可能有些小题大作,但回过头想想还是非常有必要的,有点阴沟里翻船的感觉. ...

  10. struts2捕获action类异常

    首先是STRUTS.XML的配置.重点在于配置文件: <!-- struts2捕获action类异常 -->         <global-results> <resu ...