Vue2.x路由的步骤

Posted laoniaofly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue2.x路由的步骤相关的知识,希望对你有一定的参考价值。

创建路由步骤:

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路由的步骤的主要内容,如果未能解决你的问题,请参考以下文章

vue2.x路由更新问题相关处理方式

vue2.X的路由

(转)Vue2.X的路由管理记录之 钩子函数(切割流水线)

简单对比vue2.x与vue3.x响应式及新功能

Vue2.x项目打包路径配置(相对路径)

VSCode自定义代码片段11——vue路由的配置