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-linkto=“跳转路径”></router-link>：该标签会默认被解析成<a>标签
<router-view></router-view>：该标签用于展示组件中的内容，是路由的出口
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
</head>
<body>
<!--==============================5、使用路由====================================-->
<divid="app">
<!--使用router-link组件来导航：该标签默认会被解析成一个<a></a>标签-->
<!--通过传入`to`属性指定链接.-->
<router-linkto="/employee">员工管理</router-link>
<router-linkto="/department">部门管理</router-link>
<router-linkto="/storage">仓库管理</router-link>
<hr/><!--分隔线-->
<router-view></router-view><!--路由出口：用于展示组件中的内容-->
</div>
<!--==============================1、定义组件模板====================================-->
<templateid="temp">
<!--这个div是根标签-->
<div>
<h1>员工管理</h1>
模板内容
</div>
</template>
<templateid="temp2">
<!--这个div是根标签-->
<div>
<h1>部门管理</h1>
模板内容
</div>
</template>
<templateid="temp3">
<!--这个div是根标签-->
<div>
<h1>仓库管理</h1>
模板内容
</div>
</template>
<scripttype="text/javascript"src="js/vue.js"></script><!--重点-->
<!--vue路由必需js文件：要在vue.ja文件后面-->
<scripttype="text/javascript"src="js/vue-router.js"></script><!--重点-->
<script>
/*=================================2、定义组件==========================================*/
varemp=Vue.component("compon1",{
template:"#temp"
})
vardepar=Vue.component("compon2",{
template:"#temp2"
})
varstor=Vue.component("compon3",{
template:"#temp3"
})
/*=======================3、创建路由对象===================================*/
varroute=newVueRouter({
routes:[
{
path:"/employee",//路径
component:emp//路由对应的资源（获取vue组件对象）
},
{
path:"/department",//路径
component:depar//路由对应的资源（获取vue组件对象）
},
{
path:"/storage",//路径
component:stor//路由对应的资源（获取vue组件对象）
}
]
})
/*=======================4、将路由对象配置到vue实例中===================================*/
//挂载vue实例
varapp=newVue({
el:"#app",
router:route
})
</script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56368.shtml
