【Vue的路由，SPA概念】
2019-08-16 11:51:39来源：博客园 阅读 ()
【Vue的路由，SPA概念】
前言
本章是为了以后实现前端页面的搭建而写的，
重点在于如何实现 单页Web应用
因为相对于以前的传统多页面web，有很大的缺陷。
那么就必须了解一下Vue的路由设置。
SPA的概念
总的而言，我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。
那么这样有什么缺点呢？
- 每次请求返回的体积太大，加大了服务器的压力
- 页面较大的话，会影响页面的加载速度。
- 不能提供给用户良好的体验
所以，在以上的缺点的问题在SPA都能解决
SPA(single page application，SPA）
SPA,中每次加载都是获取到自己所需要的特定数据，所以才方便快捷。
所以要用各种组件合成的路由来构建SPA
路由的创建
先理清思路：
- 先将需要用到的组件写好。
- 给写好的组件合成一个路由（规划路线）。
- 将合成好的路由放到路由器中。
- 将路由器挂载在vue的实列上。
- 定义瞄点 （body）
- 尝试跳转 (body)
<script type="text/javascript">
//定义两个组件
const Home = Vue.extend({
template: '<div><p>这是一个Home组件</p><div>Home组件内容</div></div>'
});
const About = Vue.extend({
template: '<div><p>这是一个About组件</p><div>About组件内容</div></div>'
});
//定义路由
//规划路线
var routes = [{
path: '/Home',
component: Home
}, {
path: '/About',
component: About
}];
//将路由放入到路由器中
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
data() {
return {
msg: "hello"
};
}
});
</script>
路由的使用
<router-link to="/Home">//就代表着使用Path 名字为Home 的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
<title></title>
</head>
<body>
<div id="app">
<ul>
<li>
<h3>文本</h3>
{{msg}}
</li>
<li>
<!-- 定义锚点 -->
<router-link to="/Home">go to Home</router-link>
<router-link to="/About">go to About</router-link>
</li>
<li>
<router-view></router-view>
</li>
</ul>
</div>
</body>
</html>
router-link的相关属性
replace
加了这个之后就可以消除历史记录。
导航后不会留下 history 记录
<router-link to="/Home" replace>go to Home</router-link>
以及一些跟导航相关的操作：
this.$router.go(-1) ：代表着后退
this.$router.go(1)：代表着前进
this.$router.push({ 切换到name为home的路由
name:'home'
});
注意这个只能在vue的实列中使用
1 new Vue({
2 el:"#app",
3 // 将路由器挂载到指定边界
4 router: router,
5 data: function() {
6 return {
7 ts: new Date().getTime()
8 }
9 }，methods:{
10 doForward:function(){
11 console.log('doForward方法被调用');
12 this.$router.go(1);
13 },
14 doBack:function(){
15 console.log('doBack方法被调用');
16 this.$router.go(-1);
17 }
18 }
19 });
append
这个也就是改变地址栏的位置
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
<router-link to="/Home" append>go to Home</router-link>
渲染
有时候想要 <router-link> 渲染成某种标签，例如 `<li>`。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航
<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果 --> <li>foo</li>
总结
为了以后整合页面，打好基础
Thanks?(?ω?)?希望对大家有所帮助
原文链接:https://www.cnblogs.com/liwangwang/p/11300607.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后 2020-06-10
- java 在线网络考试系统源码 springboot mybaits vue.js 前后 2020-05-31
- Spark SQL源码解析（五）SparkPlan准备和执行阶段 2020-05-27
- vue 页面跳转的两种方式 2020-05-20
- 在IntelliJ IDEA中创建和运行java/scala/spark程序 2020-05-18
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
