首页 > 其他 > 详细

第十三讲===>安装和使用路由

时间:2020-03-27 22:23:20      阅读:53      评论:0      收藏:0      [点我收藏+]
  • 路由是以插件的形式引入到我们的vue项目中来的

    • vue-router是vue的核心插件
      1:下载 npm i vue-router -S
      2:安装插件Vue.use(VueRouter);
      3:创建路由对象 var router = new VueRouter();
      4:配置路由规则 router.addRoutes([路由对象]);
      路由对象{path:‘锚点值‘,component:要(填坑)显示的组件}
      5:将配置好的路由对象交给Vue
      • 在options中传递-> key叫做 router
      6:留坑(使用组件) <router-view></router-view>
<!DOCTYPE html>
<html>
<head>
	<title>路由的安装和使用</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<!-- 引入路由插件 -->
	<script type="text/javascript" src="vue-router.js"></script>
	<script type="text/javascript">
		var Login={
			template:`
				<div>我是登录页面</div>
			`,
		}
		//安装路由插件
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{path:‘/login‘,name:‘login‘,component:Login}
			]
		})
		new Vue({
			el:‘#app‘,
			router,
			template:`
				<div>
					<p>请在链接上加上login测试路由功能</p>
					<router-view></router-view>
				</div>
			`,
			data(){
				return {}
			},
		})
	</script>
</body>
</html>

第十三讲===>安装和使用路由

原文:https://www.cnblogs.com/xl4ng/p/12584443.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!