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

  • 路由是以插件的形式引入到我们的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>
posted @ 2020-03-27 21:20  xl4ng  阅读(133)  评论(0)  编辑  收藏  举报