2-9 vue-router
2017-09-05 本文已影响51人
codeTao
vue-router
- 用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们
1.单页面应用程序特点:
- 1.起始至终都在一个页面当中, 不会发生页面的跳转
- 2.加载数据都通过发送AJAX请求来获取内容.(显示加载中)
- 3.可以去做webApp
- 4.加载的性能会高一些,都是异步加载
- 5.对用户比较友好, 在加载过程当中, 可以提示用户正在加载中...
- 原理:在每一次锚点发生变化时, 去向服务器发送网路请求.
- 服务器把请求结果,插入到文档当中
2. #的涵义
-
#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如,http://www.example.com/index.html#print
就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。
二、HTTP请求不包括#
-
#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。
比如，访问下面的网址，http://www.example.com/index.html#print，浏览器实际发出的请求是这样的：
GET /index.html HTTP/1.1
Host: www.example.com
三、#后的字符
- 在第一个
#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。
比如，下面URL的原意是指定一个颜色值：http://www.example.com/?color=#fff，但是，浏览器实际发出的请求是：
GET /?color= HTTP/1.1
Host: www.example.com
四、改变#不触发网页重载
- 单单改变
#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。
比如，从http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2，浏览器不会重新向服务器请求index.html。
五、改变#会改变浏览器的访问历史
- 每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的
#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。
- 重定向:就是通过各种方法将各种网络请求重新定个方向转到其它位置
vue-router 2.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 600px;
height: 60px;
line-height: 60px;
background: #000;
margin: 50px auto;
margin-bottom: 0px;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
text-align: center;
}
.nav ul li a{
color: #fff;
text-decoration: none;
}
.content{
width: 600px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="app">
<div class="nav">
<ul>
<li><a v-link="{path:'/home/1'}">首页</a></li>
<li><a v-link="{path:'/music/2'}">音乐</a></li>
<li><a v-link="{path:'/singer/3'}">歌手</a></li>
</ul>
</div>
<div class="content">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
<!--首页模版-->
<template id="temp1">
<h1>首页内容</h1><p>{{$route.params.id}}</p>
<a v-link="{path:'/home/1/login'}">登录</a>
<a v-link="{path:'/home/1/regist'}">注册</a>
<!--路由匹配到的组件将渲染在这里-->
<router-view></router-view>
</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//路由,有一个根组织
//路由传参数: $route.params.id
//1.实例化组件
var root = Vue.extend();
//2.创建路由对象
var router = new VueRouter();
//3.配置路由
router.map({
'/home/:id':{
component:{
//template:'<h1>首页</h1><p>{{$route.params.id}}</p>'
template:'#temp1'
},
//子路由
//home/1/login
//home/1/regist
subRoutes:{
'/login':{
component:{
template:'<h1>登录信息</h1>'
}
},
'/regist':{
component:{
template:'<h1>注册信息</h1>'
}
}
}
},
'/music/:id':{
component:{
template:'<h1>音乐</h1><p>{{$route.params.id}}</p>'
}
},
'/singer/:id':{
component:{
template:'<h1>歌手</h1><p>{{$route.params.id}}</p>'
}
}
});
//设置路由默认跳转
//重定向:就是通过各种方法将各种网络请求重新定个方向转到其它位置
router.redirect({
'/':'/home/1/login'
});
//4.开启路由
router.start(root, '#app');
//5.设置跳转 v-link="path:'/home'"
//6.设置占位符
</script>
</html>
vue-router 2.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
width: 600px;
height: 60px;
line-height: 60px;
background: #000;
margin: 50px auto;
margin-bottom: 0px;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
text-align: center;
}
.nav ul li a{
color: #fff;
text-decoration: none;
}
.content{
width: 600px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="app">
<div class="nav">
<ul>
<!--使用 router-link 组件来导航-->
<!--通过传入 `to` 属性指定链接-->
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/music">音乐</router-link></li>
<li><router-link to="/singer">歌曲</router-link></li>
</ul>
</div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<div class="content">
<router-view></router-view>
</div>
</div>
<template id="home_tpl">
<div>
<h1>首页</h1>
<div>
<router-link to="/home/login">登录</router-link>
<router-link to="/home/regist">注册</router-link>
<router-view></router-view>
</div>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//1.定义组件 模版
//const home = {template:'<div>home</div>'};
const home = {template:'#home_tpl'};
const music = {template:'<div>music</div>'};
const singer = {template:'<div>singer</div>'};
const login = {template:'<div>登录信息</div>'};
const regist = {template:'<div>注册信息</div>'};
//2.定义路由
const routes = [
{path:'/home', component: home,
children:[
//注意:在子路由中,不要添加 /
{path:'login', component:login},
{path:'regist', component:regist}
]},
{path:'/music', component: music},
{path:'/singer', component: singer},
//定义根路由指向
{path:'/', redirect:'/home'}
];
//3.创建router实例, 然后配置 routes
const router = new VueRouter({
routes //缩写 相当于 routes:routes
});
//4.创建和挂载实例
/* new Vue({
el:'#app'
})*/
const app = new Vue({
router
}).$mount('#app');
</script>
</html>
