VueRouter认识
程序员文章站
2022-04-30 20:28:25
1、 什么是路由？ 注意：作为vue的插件，需要单独引入js文件，且必须在vue.js之后引入。
1、 什么是路由？
路由（vue-router）是负责将进入的浏览器请求映射到特定的 组件 代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
2、路由的使用
注意：作为vue的插件，需要单独引入js文件，且必须在vue.js之后引入。
路由的使用步骤：
1、定义模板
2、定义组件
3、创建路由对象
4、将路由对象配置到vue实例中
5、路由调用：
<router-link to=“跳转路径”></router-link>：该标签会默认被解析成<a>标签
<router-view></router-view>：该标签用于展示组件中的内容，是路由的出口
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- ==============================5、使用路由==================================== -->
<div id="app">
<!-- 使用 router-link 组件来导航：该标签默认会被解析成一个<a></a>标签 -->
<!-- 通过传入 `to` 属性指定链接. -->
<router-link to="/employee">员工管理</router-link>
<router-link to="/department">部门管理</router-link>
<router-link to="/storage">仓库管理</router-link>
<hr /> <!--分隔线-->
<router-view></router-view> <!--路由出口：用于展示组件中的内容-->
</div>
<!-- ==============================1、定义组件模板==================================== -->
<template id="temp">
<!--这个div是根标签-->
<div>
<h1>员工管理</h1>
模板内容
</div>
</template>
<template id="temp2">
<!--这个div是根标签-->
<div>
<h1>部门管理</h1>
模板内容
</div>
</template>
<template id="temp3">
<!--这个div是根标签-->
<div>
<h1>仓库管理</h1>
模板内容
</div>
</template>
<script type="text/javascript" src="js/vue.js" ></script> <!--重点-->
<!--vue路由必需js文件：要在vue.ja文件后面-->
<script type="text/javascript" src="js/vue-router.js" ></script> <!--重点-->
<script>
/* =================================2、定义组件========================================== */
var emp= vue.component("compon1",{
template:"#temp"
})
var depar = vue.component("compon2",{
template:"#temp2"
})
var stor = vue.component("compon3",{
template:"#temp3"
})
/* =======================3、创建路由对象=================================== */
var route = new vuerouter({
routes:[
{
path:"/employee", //路径
component:emp //路由对应的资源（获取vue组件对象）
},
{
path:"/department",//路径
component:depar //路由对应的资源（获取vue组件对象）
},
{
path:"/storage", //路径
component:stor //路由对应的资源（获取vue组件对象）
}
]
})
/* =======================4、将路由对象配置到vue实例中=================================== */
//挂载vue实例
var app= new vue({
el:"#app",
router:route
})
</script>
</body>
</html>