创建路由步骤：

1.引入vue-router库，可用最新版https://unpkg.com/vue-router

2.创建所需要的组件

3.创建router实例对象

4.在根实例中注册一下 =》方式：router:router

实例如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<script src="https://unpkg.com/vue"></script>

		<script src="https://unpkg.com/vue-router"></script>

		<title>组件化</title>

	</head>

	<body>

		<div id="box">

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

			<router-link to="/news">新闻</router-link>

			<hr />

			<router-view></router-view>

		</div>

		<template id="home">

			<div>

				<bbb></bbb>

				<p>{{msg}}</p>

			</div>

		</template>

		<template id="news">

			<div>

				<bbb></bbb>

				<p>{{msg}}</p>

			</div>

		</template>

		<template id="bbb">

			<div>

				<h1>模板</h1>

			</div>

		</template>

		<script>

			//1.创建组件

			var Home=Vue.extend({

				template:"#home",

				data(){

					return { msg:"我是主页模板" };

				},

				components:{

					'bbb':{

						template:"#bbb"

					}

				}

			});

			var News=Vue.extend({

				template:"#news",

				data(){

					return { msg:"我是新闻模板" };

				},

				components:{

					'bbb':{

						template:"#bbb"

					}

				}

			});

			//2.创建Router实例对象

			var router=new VueRouter(

				{

					routes:[

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

						{path:"/news",component:News}

					]

				}

			);

			//3.创建根实例对象，通过路由配置参数注入路由，让整个应用都有相应的路由地址

			var vm=new Vue({

				router:router

			}).$mount("#box");

		</script>

	</body>

</html>

　　

Vue2.x路由的步骤的更多相关文章

  1. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

  2. vue1与vue2的路由 以及vue2项目大概了解

    vue1的路由 1.设置根组件  Vue.extend() 2.设置局部组件  Vue.extend({template:"/home"}) 3.实例化路由   var route ...

  3. vue2.0路由

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

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

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

  5. nodejs添加路由route步骤详解

    首先,毋庸置疑, 新建一个基础express站点.建好之后, 有三个文件需要code(当然,三个步骤顺序随意). 下面以添加一个'/about'为例说明. 1. 在views文件夹里,新建一个jade ...

  6. vue2.0路由进阶

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

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

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

  8. vue2.0 路由传参（router-link传过去）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue2.0 路由知识一(路由的创建的全过程)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 远程桌面控制winsever，复制文件或者文件夹夹时出错提示“未指定的错误” 二（如何让远程电脑识别U盘）

    一.背景:   要给远程服务器安装数据库,把安装复制到服务器,出现复制文件或者文件夹夹时出错提示“未指定的错误”:通过映射网络分享文件方法来解决,发现服务器访问网络出现错误,ping分享文件电脑的IP ...

  2. fetch请求get方式以及post提交参数为formdata类型的数据

    1.请求方式post,请求函数参数 _requestData(callback,_cityDt){ const switchIp = "http://192.168.43.103/api/p ...

  3. 基于服务器AAA实验

    ---恢复内容开始--- 一.实验拓扑 二.实验地址分配  设备  端口  ip  掩码  AAAA  g0/0 and se0/3/0  192.168.1.1 and 192.168.4.1  2 ...

  4. 【PYTHON】a-start寻路算法

    本文章适合黄金段位的LOL大神,同样更适合出门在外没有导航,就找不到家的孩子. 在英雄联盟之中,当你和你的队友都苦苦修炼到十八级的时候,仍然与敌方阵营不分胜负,就在你刚买好装备已经神装的时候,你看见信 ...

  5. MySQL数据库（2）

    上一篇我们讲述过MySQL创建数据库,数据表的内容,其中涉及到了几个约束: NOT NULL   非空约束 PRIMARY KEY   主键约束 UNIQUE KEY    唯一约束 其实还有两个约束 ...

  6. PHP的openssl_encrypt方法的Java实现

    <?php class OpenSSL3DES { /*密钥,22个字符*/ const KEY='09bd821d3e764f44899a9dc6'; /*向量,8个或10个字符*/ cons ...

  7. SQL-在Update中进行子查询和左联查询

    以下总结源自后边的三个参考思索和测试而来: 我们有一张行政区划表,为了查询速度的优化,我们需要在这张表中,将每个乡镇的记录中写入其所属的省.市.县, 表如下: 当然,我们可以使用游标或在存储过程中使用 ...

  8. jquery横向纵向鼠标滚轮全屏切换

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  9. .gitconfig

    [user] name = 1111 email = 111@111.com[credential] helper = store

  10. BAT面试官告诉你如何回答你的职业规划

    前言(Why) 在面试中不论是在一面二面三面这种技术面,还是在最后的hr面,经常会被人问及,"谈谈你的职业规划"这种问题,我们回答的很可能会给我们的面试表现加分,如果回答地不好,对 ...