前言
本章是为了以后实现前端页面的搭建而写的,
重点在于如何实现 单页Web应用
因为相对于以前的传统多页面web,有很大的缺陷。
那么就必须了解一下Vue的路由设置。
SPA的概念
总的而言,我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。
那么这样有什么缺点呢?
每次请求返回的体积太大,加大了服务器的压力
页面较大的话,会影响页面的加载速度。
不能提供给用户良好的体验
所以,在以上的缺点的问题在SPA都能解决
SPA(single page application,SPA)
SPA,中每次加载都是获取到自己所需要的特定数据,所以才方便快捷。
所以要用各种组件合成的路由来构建SPA
路由的创建
先理清思路:
先将需要用到的组件写好。
给写好的组件合成一个路由(规划路线)。
将合成好的路由放到路由器中。
将路由器挂载在vue的实列上。
定义瞄点 (body)
尝试跳转 (body)
//定义两个组件
const Home =Vue.extend({
template: '
这是一个Home组件
const About =Vue.extend({
template: '
这是一个About组件
//定义路由
//规划路线
var routes =[{
path: '/Home', component: Home }, { path: '/About', component: About }]; //将路由放入到路由器中 const router = newVueRouter({ routes }); newVue({ el: '#app', router, data() { return{ msg: "hello"}; } });
路由的使用
//就代表着使用Path 名字为Home 的组件
文本
{{msg}}go to Home
go to About
router-link的相关属性
replace
加了这个之后就可以消除历史记录。
导航后不会留下 history 记录
go to Home
以及一些跟导航相关的操作:
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
go to Home
渲染
有时候想要 渲染成某种标签,例如 ``。于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航
foo
foo总结
为了以后整合页面,打好基础
Thanks♪(・ω・)ノ希望对大家有所帮助