0302路由的安装和使用

最新推荐文章于 2025-02-20 06:00:00 发布

wnashi_万石

最新推荐文章于 2025-02-20 06:00:00 发布

阅读量102

点赞数

分类专栏： 002_Vue零基础

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114343228

版权

002_Vue零基础专栏收录该内容

14 篇文章

订阅专栏

001_0302路由的安装和使用(h3)

路由是以插件的形式引入到我们的vue项目中来的
vue-router是vue的核心插件
- 下载 npm i vue-router -S
- 安装插件Vue.use(VueRouter);
- 创建路由对象 var router = new VueRouter();
- 配置路由规则 router.addRoutes([路由对象]);
  - 路由对象{path:'锚点值',component:要(填坑)显示的组件}
- 将配置好的路由对象交给Vue
  - 在options中传递-> key叫做 router
- 留坑(使用组件) <router-view></router-view>
源代码

<!DOCTYPE html>
<html>
<head>
	<title>路由的安装和使用</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<!-- 001引入路由插件 -->
	<script type="text/javascript" src="../js/vue-router.js"></script>
	<script type="text/javascript">
		var Login={
			template:`
				<div>我是登录页面</div>
			`,
		}
		//002安装路由插件
		Vue.use(VueRouter);
		//003创建路由对象
		var router= new VueRouter({
			//004配置路由对象
			routes:[
				{path:'/login',name:'login',component:Login}
			]
		})
		new Vue({
			el:'#app',
			router,
			template:`
				<div>
					<router-link to='/login'>去登录</router-link>
					<router-view></router-view>
				</div>
			`,
			data(){
				return {}
			},
		})
	</script>
</body>
</html>