路由的步骤

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. 从MVC到Ajax再到前后端分离的思考

    前言 一位小妹去面试前端,前端leader问了"什么是ajax?",答:"接收后台的数据,然后然后自己填充和渲染样式":一位小哥去面试后台,技术经理问了&quo ...

  2. 大数据学习系列之一 ----- Hadoop环境搭建(单机)

    一.环境选择 1,服务器选择 阿里云服务器:入门型(按量付费) 操作系统:linux CentOS 6.8 Cpu:1核 内存:1G 硬盘:40G ip:39.108.77.250 2,配置选择 JD ...

  3. js 去掉数组中重复值，不重复的值保留

    这里介绍2中方式:js代码如下 var arr=[1,7,3,2,1,4,12,3,"3",3] function compare(arr) { var result = [], ...

  4. jquery 循环数组输出显示在html页面

    jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: $(function(){ var ...

  5. java的热部署和热加载

    ps:热部署和热加载其实是两个类似但不同的概念,之前理解不深,so,这篇文章重构了下. 一.热部署与热加载 在应用运行的时升级软件,无需重新启动的方式有两种,热部署和热加载. 对于Java应用程序来说 ...

  6. 具体解释Java虚拟机类载入

    概述 在Java语言里面,类型的载入.连接和初始化过程都是在程序运行期间完毕的.虚拟机把描写叙述类的数据从Class文件或其他地方载入到内存,并对数据进行校验.转换解析和初始化,终于形成能够被虚拟机直 ...

  7. C++简易list

    list不同于vector.每一个节点的结构须要自行定义,迭代器属于双向迭代器(不是随即迭代器),也须要自行定义.和通用迭代器一样,list的迭代器须要实现的操作有:++.--.*.->.==. ...

  8. java_多态

    一.多态(对象的多种形态)1.引用的多态 父类的引用指向本类的对象 父类的引用指向子类的对象(引用多态) (不允许子类对象指向父类)2.方法多态 创建本类对象时调用的方法为本类的方法 创建子类对象时, ...

  9. Docker 搭建 etcd 集群

    阅读目录: 主机安装 集群搭建 API 操作 API 说明和 etcdctl 命令说明 etcd 是 CoreOS 团队发起的一个开源项目(Go 语言,其实很多这类项目都是 Go 语言实现的,只能说很 ...

  10. 如何把git仓库（包含所有提交历史）迁移到gitlab

    在gitlab上new 一个project 跳转到本地的git 目录中,运行命令 git remote add gitlab gitlab_new_project_address -最后运行如下命令, ...