路由的步骤

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. Foundation基础框架

    自己总结的 // // main.m // 01-结构体 // // Created by Mac-ZhangXiaoMeng on 14/12/29. // Copyright (c) 2014年 ...

  2. Less 的使用方法

    Less 的使用方法 Less 可以直接在浏览器端运行(支持IE6+.Webkit.Firefox),也可以借助Node.js或者Rhino在服务端运行. Less是一种动态语言,无论是在浏览器端,还 ...

  3. 【架构篇】OCP和依赖注入

    描述 本篇文章主要讲解 : (1)OO设计OCP原则: (2)依赖注入引入 (3)依赖注入分析 (4)依赖注入种类 1   内容区 1.1   IOC背景 (1)Ralph E. Johnson &a ...

  4. Gulp livereload

    平时使用yeoman作为前端部署工具,感觉到yeoman构建工具虽然方便,但是速度和大小总是不尽人意. 最近看到了gulp http://gulpjs.com/ 比较感兴趣随动手一试 gulp的安装以 ...

  5. yii2.0中Rbac 怎么添加超加管理员

    最笨的是定义常量.具体怎么做?看下面: //定义在控制器声明上面define('BEST_PHPER',serialize(array('admin','admin1')));//设置admin管理员 ...

  6. javascript中break，continue和return语句用法小结：

    Break语句会使程序立刻退出包含在最底层的循环或者退出一个switch语句,它是用来退出循环或者switch语句. 例如: <script type="text/javascript ...

  7. Scala入门系列（八）：面向对象之trait

    基础知识 1 将trait作为接口使用 此时Trait就与Java中的接口非常类似,不过注意,在Scala中无论继承还是trait,统一都是extends关键字. Scala跟Java 8前一样不支持 ...

  8. idea从git上拉取并管理项目

    1:idea从git上拉取项目 (1)FILE --> New --> Project from Version Control --> Git (2):输入项目的Https SSH ...

  9. Effective Java 第三版——3. 使用私有构造方法或枚类实现Singleton属性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  10. Mysql的安装和图形化界面的使用

    访问mysql网址:https://dev.mysql.com/ 下面需要登录你的oracle账号进行下载就好~ 下载之后是一解压包形式存在的~ 解压之后的文件 这里我新建了my.ini的文件~将my ...