文章目录
一. 路由简介
1.1 路由的优缺点和示例
整个webapp就一个HTML文件,里面的各个功能页面是Javascript通过hash或者history api来进行路由,并通过ajax拉取数据实现响应功能
优点:
- 分离前后端关注点,前端负责界面显示,后端负责数据存储和计算,各司其职,不会把前后端的逻辑混杂在一起
- 减轻服务器压力,服务器只用出数据就可以,不用管展示逻辑和页面合成,吞吐能力会提高几倍;
- 同一套后端程序代码,不用修改就可以用于Web界面、手机、平板等多种客户端;
缺点:
- SEO问题,现在可以通过Prerender等技术解决一部分;
- 前进、后退、地址栏等,需要程序进行管理:3·书签,需要程序来提供支持;
1.2 路由的跳转原理
单页应用的路由模式有两种:
- 哈希模式(利用hashchange事件监听url的hash的改变)
- history模式(使用此模式需要后台配合把接口都打到我们打包后的index.html上)
- 哈希模式原理:
window.addEventListener(hashchange', function(e){
console.log(e)
})
- 核心是锚点值的改变,我们监听到锚点值改变了就去局部改变页面数据,不做跳转。跟传统开发模式url改变后立刻发起请求,响应整个页面,渲染整个页面比路由的跳转用户体验更好;
- 锚点值:比如有2个组件,如果当前值是1就跳转到组件1;如果当前值是2就跳转到组件2。
路由使用示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>路由入门</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="#/login">登录</a>
<a href="#/reg">注册</a>
<div id="app"></div>
</body>
<script>
//1.根据id选择器拿到div
var divObj = document.getElementById("app");
//2.判断
window.addEventListener('hashchange',function(e){
//console.log(location.hash);
if(location.hash=='#/login'){
divObj.innerHTML="我是登录页面"
}
if(location.hash=='#/reg'){
divObj.innerHTML="我是注册页面"
}
})
</script>
</html>
1.2 vue-router官方介绍
Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
二. 路由的使用
2.1 路由的入门案例
前提是需要在HTML页面引入vue.js 和 vue-router.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>路由的入门案例</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js"></script>
</head>
<style>
#app a {
border: 2px solid rgb(109, 215, 223);
padding: 5px;
border-radius: 3px;
background: rgb(109, 215, 223);
}
#foo {
height: 200px;
background-color: rgb(128, 124, 121);
}
#bar {
height: 200px;
background-color: rgb(93, 175, 114);
}
</style>
<body>
<div id="app">
<p>
<router-link to="/foo">Go to foo</router-link>
<router-link to="/bar">Go to bar</router-link>
</p>
<!-- 路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
</body>
<script>
//1.定义路由组件,自定义组件
var Foo = {
template:`
<div id="foo">foo</div>
`
}
var Bar = {
template:`
<div id="bar">bar</div>
`
}
//2.定义路由 每个路由都映射一个组件
var routes = [
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]
//3.创建router实例
var router = new VueRouter({
//routes:routes //完整写法
routes //简写
});
//4.创建和挂键根实例
var app = new Vue({
router
}).$mount('#app');
</script>
</html>
2.2 路由的跳转方式
- 两种跳转方式:
1. 通过标签: <router-link to='/login'> </router-link>
2. 通过js控制跳转: this.$router.push((path:/login'))
- 区别:
1. this.$router.push()跳转到指定的url,会向history插入新记录
2. this.$router.replace()同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到到上一个页面;上一个记录是不存在的。
3. this.$router.go(-1)常用来做返回,读history里面的记录后退一个
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>路由的跳转方式</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
//1.创建自定义组件
var login = {template:`<div>登录页面</div>`} //登录组件
var reg = {template:`<div>注册页面</div>`} //注册组件
var buy = {template:`<div>购买页面</div>`} //购买组件
//2.创建路由对象
var router = new VueRouter({
routes:[
{path:'/login',name:'登录',component:login},
{path:'/reg',name:'注册',component:reg},
{path:'/buy',name:'购买',component:buy}
]
});
//3.创建vue对象,并进行渲染
new Vue({
el:"#app",
router,
template:`
<div>
<router-link to='/login'>登录</router-link>
<router-link to='/reg'>注册</router-link>
<div>
<button @click='toBuy'>买东西</button>
<button @click='back'>返回</button>
</div>
<router-view></router-view>
</div>
`,
methods:{
//两种方法的写作形式
toBuy(){
this.$router.replace({path:'/buy'})
},
back:function(){
this.$router.go(-1);
}
}
});
</script>
</html>
图示:
2.3 路由的传参和取值
- 查询参数
- 配置(传参) :to="(name:‘login’,query:{id:loginid)}" to就是参数名
- 获取(取参) this.$route.query.id
- 路由参数
- 配置(传参) :to="(name:register’,params:{id:registerid) }"
- 配置路由的规则{ name:‘detail’,path:/detail/id")
- 获取this.$route.params.id
- 总结:
- :to传参的属性里params是和name配对的 query和name或path都可以
- 使用路由参数必须要配置路由规则里面配置好参数名,否则刷新页面参数会丢失
- js跳转路由传参和标签传参,路由相同而参数不同时页面不做刷新的问题
- 代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>路由的传参和取值</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
//1.自定义组件
var login ={
template:`
<div>
<p>我是登录页面</p>
<span>获取到的参数是:{{msg}}</span>
</div>
`,
created:function(){
this.msg = this.$route.query.id;
}
}
var reg ={
template:`
<div>
<p>我是注册页面</p>
<span>获取到的参数是:{{str}}</span>
</div>
`,
props:['str']
}
//2.创建路由对象
var router = new VueRouter({
routes:[
//path : 跳转路径,component : 绑定自定义组件
{path:'/login',name:'login',component:login},
{path:'/reg/:str',name:'reg',props:true,component:reg}
]
});
//3.创建vue对象
new Vue({
el:"#app",
router,
template:`
<div>
<router-link :to="{name:'login',query:{id:'123'}}">登录</router-link>
<router-link :to="{name:'reg',params:{str:'注册测试'}}">注册</router-link>
<button @click='show'>跳转显示</button>
<router-view></router-view>
</div>
`,
methods:{
show(){
this.$router.push({path:'/login',query:{id:'888'}})
}
}
})
</script>
</html>
2.4 路由嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>路由嵌套</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
//1.定义导航组件
var navigation ={
template:`
<div>
<router-view></router-view>
<router-link :to="{name:'navigation.index'}">首页</router-link> |
<router-link :to="{name:'navigation.personal'}">个人中心</router-link> |
<router-link :to="{name:'navigation.msg'}">咨询</router-link> |
<router-link :to="{name:'navigation.mine'}">我的</router-link>
</div>
`
}
var index = {template:`<div>首页</div>`}
var personal = {template:`<div>个人中心</div>`}
var msg = {template:`<div>咨询</div>`}
var mine = {template:`<div>我的</div>`}
//2.创建路由对象
var router = new VueRouter({
routes:[
{path:'', redirect:'/navigation'},
//嵌套路由
{
path:'/navigation',
name:'navigation',
component:navigation,
children:[
{path:'',redirect:'/navigation/index'}, //配置嵌套路由
{path:'index',name:'navigation.index',component:index},
{path:'personal',name:'navigation.personal',component:personal},
{path:'msg',name:'navigation.msg',component:msg},
{path:'mine',name:'navigation.mine',component:mine}
]
}
]
});
//3.创建vue对象
new Vue({
el:"#app",
router,
template:`
<div>
<router-view></router-view>
</div>
`
});
</script>
</html>
示例图: