路由的步骤

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. VMware下设置Centos7联网与固定IP连接Xshell

    爱折腾的小伙伴应该经常会用Vmware安装一些虚拟机用于学习,但是比如装了Linux,经常操作的时候非常切换窗口的时候非常麻烦,所以很多人都会选择用Xshell来连接本地的Linux虚拟机,但是用Xs ...

  2. 小程序采坑系列-this.setData

    今天踩了大坑,坑里还都是碎瓶渣子.. 先说一下基本使用.官网也有. 比如说你在main.js里面有这些变量.想修改某些值. data: { main_view_bgcolor: "" ...

  3. Angular自定义组件实现数据双向数据绑定

    学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...

  4. php面试之四-Linux部分

    php面试题之四——Linux部分(高级部分) 四.Linux部分 1.请解释下列10个shell命令的用途(新浪网技术部) top.ps.mv.find.df.cat.chmod.chgrp.gre ...

  5. 关于websorm卡顿的问题

    要是电脑不卡的话,使用webstorm真可谓是一种享受,但是随着项目的开展,文件逐渐增大,webstorm自然也会出现卡顿(毕竟缺点就是吃内存),这个时候我们可以增加Xms设置 Start1: 1 找 ...

  6. python 3.6 urllib库实现天气爬取、邮件定时给妹子发送天气

    #由于每天早上要和妹子说早安,于是做个定时任务,每天早上自动爬取天气,发送天气问好邮件##涉及模块:#(1)定时任务:windows的定时任务#             配置教程链接:http://b ...

  7. MERGE语法详解

    merge语法是根据源表对目标表进行匹配查询,匹配成功时更新,不成功时插入. 其基本语法规则是 merge into 目标表 a using 源表 b on(a.条件字段1=b.条件字段1 and a ...

  8. 【liferay】1、使用alloy-UI发送ajax请求

    1.首先liferay要发送ajax请求,那么就需要在jsp中定义resourceURL <portlet:resourceURL var="workDeal" id=&qu ...

  9. Git 二分调试法，火速定位疑难Bug！

    你一定遇到过,一个很久没修改过的功能,莫名其妙的出现了问题?肉眼查代码.屡逻辑完全找不到问题点?前两天还好好的功能,怎么这个今天就不行了?这两天改动了这么多代码,到底是那一次改动引发的 Bug? 这样 ...

  10. 【leetcode】123. Best Time to Buy and Sell Stock III

    @requires_authorization @author johnsondu @create_time 2015.7.22 19:04 @url [Best Time to Buy and Se ...