路由的步骤

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. js代码大全（各种方法、属性）《转载》

      事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.sr ...

  2. P1629 邮递员送信

    题目描述: 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要一定的时间.这个邮递员 ...

  3. HDU2186--水

    悼念512汶川大地震遇难同胞--一定要记住我爱你 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  4. UWP 判断系统版本

    public class VersionsHelper { , ); , ); , ); , ); , ); }

  5. PostgreSQL索引描述

    索引方式:唯一索引,主键索引,多属性索引,部分索引,表达式索引. 索引类型:B-Tree,Hash,GiST,GIN以及表达式索引 PostgreSQL所有索引都是“从属索引”,也就是说,索引在物理上 ...

  6. Entity Framework Code First+SQL Server，改变聚集索引，提高查询性能

    .net Entity Framework(调研的是Entity Framework 4.0) code first方式生成数据库时,不能修改数据库表的索引,而SQLServer默认会把数据表的主键设 ...

  7. SqlParameter 用法总结

    作用 解决恶意的T-sql语句攻击第一种 //传入参数 string ProductGroupCode, string Ismaintain, int HierarchyID, string BOMN ...

  8. 优先队列 poj3253 Fence Repair

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 51411   Accepted: 16879 De ...

  9. Linux入门命令解释（1）

    第一章Linux安装及服务控制 1.  uname -r              //查看linux版本号 2.cat  /proc/cupinfo      //查看CPU信息 3.cat  /p ...

  10. The literal of int xxxxx is out of range

    有时候我们定义了long型的变量,当我们给该变量赋值过长的整数时,系统依旧会提示长度超过范围,解决的方法例如以下: long timeShow = 1437565243495L; 我们须要在整形变量的 ...