路由的步骤

1.定义组件

var Home={

	    template:'<h3>我是主页</h3>'

	};

	var News={

	    template:'<h3>我是新闻</h3>'

	};

2.配置路由

const routes=[

	    {path:'/home', componet:Home},

	    {path:'/news', componet:News},

	];

3.生成路由实例

const router=new VueRouter({

	    routes

	});

（代码量不大时二三步可以合并）

4.挂到vue上

new Vue({

	    router,

	    el:'#box'

	});

vue2.0的改变

1.嵌套使用方式的改变

const routes=[

	    {path:'/home', component:Home},

	    {

	        path:'/user',

	        component:User,

	        children:[  //核心

	            {path:'username',//path路径不要再以"/"开头，不然会认为从根路径开始

	             component:UserDetail}

	        ]

	    },

	];
  1. 跳转方式

废弃了a便签，引入了router-link

<router-link to="/user/hhh/age/10">hhh</router-link></li>

router-view还是不变

3. 获取数据

<li><router-link to="/user/hhh/age/10">hhh</router-link></li>

...

var UserDetail={

            template:'<div>{{$route.params}}</div>'

        };

...

const routes=[

            {path:'/home', component:Home},

            {

                path:'/user',

                component:User,

                children:[{

                    path:':username/age/:age',

                    component:UserDetail

                }]

            },

            {path:'*', redirect:'/home'}

        ];
  1. 路由实例方法:
router.push({path:'home'});

直接添加一个路由,表现切换路由，本质往历史记录里面添加一个

router.replace({path:'news'})

替换路由，不会往历史记录里面添加

全部代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script src="bower_components/vue-router/dist/vue-router.min.js"></script>

</head>

<body>

    <div id="box">

        <div>

            <input type="button" value="添加一个路由" @click="push">

            <input type="button" value="替换一个路由" @click="replace">

            <router-link to="/home">主页</router-link>

            <router-link to="/user">用户</router-link>

        </div>

        <div>

            <router-view></router-view>

        </div>

    </div>

    <script>

        var Home = {

            template:'<h3>我是主页</h3>'

        };

        var News = {

            template:'<h3>我是用户</h3>'

        };

        var User = {

            template:`

                <div>

                    <h3>我是用户信息</h3>

                    <div>

                        <li><router-link to="/user/hhh/age/10">hhh</router-link></li>

                        <li><router-link to="/user/ggg/age/20">ggg</router-link></li>

                        <li><router-link to="/user/ttt/age/30">ttt</router-link></li>

                    </div>

                    <div>

                        <router-view></router-view>

                    </div>

                </div>

            `

        };

        var UserDetail={

            template:'<div>{{$route.params}}</div>'

        };

        const routes=[

            {path:'/home', component:Home},

            {

                path:'/user',

                component:User,

                children:[{

                    path:':username/age/:age',

                    component:UserDetail

                }]

            },

            {path:'*', redirect:'/home'}

        ];

        //生成路由实例

        const router=new VueRouter({

            routes

        });

        new Vue({

            router,

            methods:{

                push:function() {

                    router.push({path:'/home'});

                },

                replace:function(){

                    router.replace({path:'user'});

                }

            }

        }).$mount('#box')

    </script>

</body>

</html>

vue2.0路由变化1的更多相关文章

  1. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  2. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  3. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  4. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

  5. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  6. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  7. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  8. 解决vue2.0路由 TypeError: Cannot read property 'matched' of undefined 的错误问题

    刚开始使用vue-router2.0,虽然也用了vux,用起来却发现一个问题--具体如下: 正常情况下使用脚手架跑完之后,然后修改源项目,首先在main.js入口里把该import进去的vuex,vu ...

  9. vue2.0路由切换后页面滚动位置不变BUG

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变.  方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...

随机推荐

  1. JavaScript OOP（二）：this关键字以及call、apply、bind

    JavaScript的this关键字非常灵活! this 返回的总是对象:即返回属性或方法"当前"所在的对象 var o1={ name:'apple', age:100, msg ...

  2. Ubuntu配置完全教程

    前言 最近将旧电脑换成了Ubuntu系统,在网上找了许多优化和配置教程,今天整理一份完整的教程给大家分享 系统清理 卸载LibreOffice libreoffice事ubuntu自带的开源offic ...

  3. js 哈希路由原理实现

    在 js 中,有一种方法,可以在不刷新页面的情况下,页面的内容进行变更,ajax 是一种,这里介绍另一种,就是 哈希路由原理 先看一个简单的路由和页面内容关联的例子,要实现两个功能: 1.1. 浏览器 ...

  4. 程序员的自我救赎---1.4.3： 核心框架讲解(MVC)

    <前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...

  5. 移动 云MAS 发短信 .net HTTP 请求

    本人开发移动云MAS .net Http 请求  代码如下 using Newtonsoft.Json.Linq; using System; using System.Collections.Gen ...

  6. LintCode-落单的数 III

    给出2*n + 2个的数字.除当中两个数字之外其它每一个数字均出现两次,找到这两个数字. 您在真实的面试中是否遇到过这个题? Yes 例子 给出 [1,2,2,3,4,4,5,3].返回 1和5 挑战 ...

  7. oracle 10g下范围分区扫描的几种方式

    oracle 10g下有几种扫描方式,注意最后一种扫描方式,当对分区的列进行计算时,会不走分区.这跟对索引列进行计算会导致无法用索引一样. --扫描单个分区  PARTITION RANGE SING ...

  8. Tabhost最纯净的实现方式

    有时候常常使用别人用Tabhost+其他的实现demo.单纯利用Tabhost该怎样使用呢? 以下看样例: public class MainActivity extends TabActivity ...

  9. Qt音乐播放器制作（二）Easy Player

    两天没有公布新的动态.主要原因还是个人的生活和工作时间限制,如今赶晚贴出第二版. 先放个图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFuNV9y ...

  10. Android Api 检查參数状态Api

    转载请注明出处:http://blog.csdn.net/droyon/article/details/39938677 在进行Android应用程序开发中,android提供了一个非常好的工具类,来 ...