1、 什么是路由？

　　路由（vue-router）是负责将进入的浏览器请求映射到特定的 组件 代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。
　　官方地址：https://router.vuejs.org/zh/
　　地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js2、路由的使用

　　　　注意：作为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>
												


											
VueRouter认识的更多相关文章
	

    
						
  1. Vue-Router  页面正在加载特效
		
    Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染 ...
    
		
    2. 
						
  2. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
		
    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
    
		
    3. 
						
  3. Vue.js——vue-router 60分钟快速入门
		
    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
    
		
    4. 
						
  4. vue-router(2.0)
		
    用Vue.js+vue-router创建单页应用是比较简单的.使用Vue.js时,我们就已经把组件组合成一个应用了,当你要把vue-router加进来,只要配置组件和路由映射,然后告诉vue-rout ...
    
		
    5. 
						
  5. vue-router
		
    官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本)  ...
    
		
    6. 
						
  6. 基于Vue2.0+Vue-router构建一个简单的单页应用
		
    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js  ...
    
		
    7. 
						
  7. Vue.js学习笔记（2）vue-router
		
    vue中vue-router的使用:
    
		
    8. 
						
  8. vue+ vue-router + webpack 踩坑之旅
		
    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...
    
		
    9. 
						
  9. vue-router 创建 vue 单页应用示例
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    10. 
						
  10. [Vuejs] 关于vue-router里面的subRoutes
		
    刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰! 使用vue-router,为了能够更好的管理.vue文件,需要用到子路由. 先看个错误的例子 routers.js '/company': ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 海洋cms自带资源发布api插件和第三方资源站接入办法说明
			
    海洋cms自带资源发布api插件和第三方资源站接入办法说明 时间:2016-07-15 13:46 来源:CMS模版网 作者:大宇 阅读:7095次 ===海洋cms自带API资源发布插件说明===* ...
    
			
    2. 
						
  2. SQLServer 可更新订阅数据冲突的一个原因
			
    原文:SQLServer 可更新订阅数据冲突的一个原因 可更新订阅为什么有冲突? 可更新订阅中,当升级增加一个字段时,通常在发布服务器的发布数据库中增加,对表增加字段后,发布自动同步到订阅数据库中(复 ...
    
			
    3. 
						
  3. C#根据对象的指定字段去除重复值
			
    PersonInfo类: public class PersonInfo { public int Index; public string Name; public override string  ...
    
			
    4. 
						
  4. Android零基础入门第85节：Fragment使用起来非常简单
			
    Fragment创建完成后并不能单独使用,还需要将Fragment加载到Activity中,在Activity中添加Fragment的方式有两种:静态加载和动态加载,接下来分别进行学习. 一.静态加载 ...
    
			
    5. 
						
  5. 简析TCP的三次握手与四次分手（TCP协议头部的格式，数据从应用层发下来，会在每一层都会加上头部信息，进行封装，然后再发送到数据接收端）good
			
    2014-10-30 分类:理论基础 / 网络开发 阅读(4127) 评论(29)  TCP是什么? 具体的关于TCP是什么,我不打算详细的说了:当你看到这篇文章时,我想你也知道TCP的概念了,想要更 ...
    
			
    6. 
						
  6. Qt5 结构及模块组成？
			
    作为一个Qt的粉丝,对将于明年发布的Qt5充满了期待.可是想想Qt5将发生的巨大变化,心底又有点不安.Qt5到底会变成什么样呢? 看看近期Qt5的一些大动作: 从 QtCore中移除 QSetting ...
    
			
    7. 
						
  7. Web 高效开发必备的 PHP 框架
			
    摘要: 每周为您推送最有价值的开源技术内参! 码云项目推荐 1.项目名称:多功能 THinkPHP 开源框架 项目简介:使用 THinkPHP 开发项目的过程中把一些常用的功能或者第三方 sdk 整合 ...
    
			
    8. 
						
  8. Ruby元编程：执行某个目录下的全部测试用例
			
    目前手里有个测试项目各个feature的测试用例都放在对应的子目录下,虽然有自动化测试框架的帮助执行起来很方便,但是偶尔也有需要在本地执行某个feature的全部测试用例集合.因为本人对shell脚本 ...
    
			
    9. 
						
  9. 怎么看待php 面向对象思想
			
    面向对象的程序设计思路是现代程序设计由面向过程演变面向对象的必然趋势,所以面向对象的而设计思路必然有它不同的时代意义,必然有着不同面向过程的不同历史使命,而php 5以后成功添加面向对象的设计思路其实 ...
    
			
    10. 
						
  10. git(二)
			
    一.GitHub(代码的云仓库) 1.创建一个新的项目 git remote add origin https://github.com/1352282824shy/COCAP.git git pus ...
    
			
    11.