本文实例讲述了vue2路由基本用法。分享给大家供大家参考,具体如下:
Vue-router是给Vue。js提供路由管理的插件,利用哈希的变化控制动态组件的切换。以往页面间跳转都由后端MVC中控制器层控制,通过& lt; a>标签的href或者直接修改位置。href,我们会向服务端发起一个请求,服务端响应后根据所接收到的信息去获取数据和指派对应的模板,渲染成HTML再返回给浏览器,解析成我们可见的页面.Vue。js + Vue-router的组合将这一套逻辑放在了前端去执行,切换到对应的组件后再向后端请求数据,填充进模板来,在浏览器端完成HTML的渲染。这样也有助于前后端分离,前端不用依赖于后端的逻辑,只需要后端提供数据接口即可。
<强>引用方式:
在HTML中直接用脚本标签引入即可,例如:
& lt;脚本src=" https://www.yisu.com/zixun//lib/vue-router.js "祝辞& lt;/script>
: vue的引入要放在vue-router的之前,不然vue-router会不起作用。
<>强基本用法:
本文章将结合boostrap中的样式来做案例,实现导航条,点击实现不同的页面。
& lt; % @ taglib前缀=" c " uri=" http://java.sun.com/jsp/jstl/core " %比;
% @ & lt;页面contentType=" text/html; charset=utf - 8”语言=癹ava”%比;
& lt; html>
& lt; head>
& lt; title> routerTest1
& lt; c:进口url=" importFile.jsp "祝辞& lt;/c: import>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt;导航类=皀avbar navbar-inverse”比;
& lt; div类=癱ontainer-fluid”比;
& lt; div类=皀avbar-header”比;
& lt;一个类=" navbar-brand " href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”祝辞Brand
& lt;/div>
& lt; div类="崩溃navbar-collapse " id=癰s-example-navbar-collapse-1”比;
& lt; ul类=皀av navbar-nav”比;
& lt; %——定义跳转的路径——%比;
& lt;李类=盎钤尽北?& lt; router-link="/home "祝辞Home & lt;/li>
& lt; li>& lt; router-link="/列表”祝辞List & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/nav>
& lt; div类="容器"比;
& lt; !——路由切换组件模板插入的位置——比;
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt;/div>
& lt;脚本类型=" x-template " id=癿odalTel”比;
& lt; div>
& lt; h2>这是主页& lt;/h2>
& lt;/div>
& lt;/script>
& lt; script>/*
* var回家=Vue.extend ({
模板:“& lt; h2>这是主页& lt;/h2>”
})
* *//*使用Javascrip模板创建组件*/var=Vue.extend回家({
模板:“# modalTel”
})/*创建路由器实例*/const路由器=new VueRouter ({
路线:[/*默认时的路径*/{路径:“/?重定向:“/home”},
{
路径:/home,
组件:回家,
}，
{
路径:/列表,
组件:{/*显示一些路由的属性*/模板:“& lt; h2>这是列表页面- - - - - {{$ route.path}} & lt;/h2>”
}
}
]
});
const应用=new Vue ({
路由器:路由器
})。美元山(“#应用”)
& lt;/script>
& lt;/body>
& lt;/html>
之前
importFile。jsp
% @ & lt;页面contentType=" text/html; charset=utf - 8”语言=癹ava”%比;
& lt; html>
& lt; head>
& lt; title>框架文件& lt;/title>
& lt;链接的href=" https://www.yisu.com/zixun//frame/bootstrap-3.1.1/css/bootstrap.css " rel=巴獠縩ofollow”rel=把奖怼北?
& lt;脚本src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun//lib/vue-router.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun//lib/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun//frame/bootstrap-3.1.1/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;/body>
& lt;/html>
之前
这样整个运行成功了。
, 
这样,简单的路由实例就完成了。
<>强路由对象:
