一、路由的介绍
整个webapp就一个HTML文件, 里面的各个功能页面是JavaScript通过hash或者history api来进行路由,并通过ajax拉取数据实现响应功能。
优点：
- 分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起;
- 减轻服务器压力,服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍;
- 同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。
缺点：
- SEO问题，现在可以通过Prerender等技术解决一 部分;
- 前进、后退、地址栏等，需要程序进行管理;
- 书签,需要程序来提供支持。
二、路由的跳转原理
-
单页应用的路由模式有两种：
哈希模式： 利用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>vue 路由的跳转原理</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js"></script> </head> <body> <a href="#/login">登录</a> <a href="#/register">注册</a> <div id="app"></div> </body> <script> //根据id拿到div var div = document.getElementById("app"); //判断hash值 window.addEventListener("hashchange",function(e){ console.log(location.hash); //获取hash值 if(location.hash == "#/login"){ div.innerHTML="<p style='color: red;'>登录界面</p>"; } if(location.hash == "#/register"){ div.innerHTML="注册界面"; } }) </script> </html>
三、 vue 路由使用
下载vue-router.js文件，引入到项目中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue 路由使用</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: 1px solid rgb(109, 215, 223);
padding: 5px;
border-radius: 5px;
background: rgb(109, 215, 223);
}
#login {
height: 200px;
background-color: aqua;
text-align: center;
}
#reg {
height: 200px;
background-color: rgb(93, 175, 114);
text-align: center;
}
</style>
<body>
<div id="app">
<!-- 等同于原来html中的 <a>标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 路由的出口-->
<!-- 路由匹配到的组件将渲染在这里-->
<router-view></router-view>
</div>
</body>
<script>
//1.定义路由组件
//自定义组件，模板是内容的具体展示
var Login = {
template:'<div id="login">登录界面</div>'
}
var Register = {
template:'<div id="reg">注册界面</div>'
}
//2.定义路由
// 每个路由都应该映射一个组件，通过 Vue.extend() 或者component引入组件
var routes=[
{path:"/login",component:Login},
{path:"/register",component:Register}
]
//3.创建router实例（对象），将routes出入路由对象
var router = new VueRouter({
// routes:routes ,//完整写法
routes //简写方式
})
//4.创建和挂载根实例
// 通过router配置参数注入路由，从而让整个应用都有路由功能
var app = new Vue({
router
}).$mount("#app");
</script>
</html>
四、vue 路由跳转方式
-
两种跳转方式：
1.通过标签：`<router-link to='/login'></router-link>` 2.通过js控制跳转`this.$router.push({path:'/login'})`区别：
this.$router.push()：跳转到指定的url，会向history插入新记录
his.$router.replace()：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到到上一个页面。上一个记录是不存在的。
this.$router.go(-1)：常用来做返回，读history里面的记录后退一个vue-router中的对象：
$route 路由信息对象,只读对象
$router 路由操作对象,只写对象 -
代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 路由跳转方式</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 Register = { template: '<div>这是注册界面</div>' } var Order = { template: '<div>这是订单界面</div>' } //2.创建路由对象，并绑定 routes(它内部就是 路径和组件) var router = new VueRouter({ routes: [ //path 访问路径， component： xxx是自定义组件名 { path: "/login", name: "登录", component: Login }, { path: "/register", name: "注册", component: Register }, { path: "/order", name: "订单", component: Order } ] }) //3.创建Vue对象，进行页面渲染，不要忘记添加页面渲染<router-view></router-view> var app = new Vue({ el: "#app", router, template: ` <div> <router-link to='/login'>登录</router-link> <router-link to='/register'>注册</router-link> <div> <button @click='toOrder'>查看订单</button> <button @click='toBack'>返回上一页</button> </div> <router-view></router-view> </div> `, //使用js跳转方式，用点击事件，跳转到订单页面 methods: { toOrder() { this.$router.push({path:"/order"}); }, toBack:function(){ this.$router.go(-1); } } }) </script> </html>
五、vue 路由的传参和取参
-
传参和取参的介绍
查询参数
配置（传参） :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总结：
1. :to传参的属性里 params是和name配对的 query和name或path都可以 2. 使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失 3. js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题 -
代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 路由的传参和取参</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> <p>登录界面</p> <span>获取的参数是：{{msg}}</span> </div> `, created: function() { this.msg = this.$route.query.id; //获取参数值赋给msg } } var Order = { template: ` <div> <p>订单界面</p> <span>获取的参数是：{{id}}</span> </div> `, created: function() { this.id = this.$route.query.id; //获取参数值赋给msg } } var Register = { template: ` <div> <p>注册界面</p> <span>获取的参数是：{{str}}</span> </div> `, props: ['str'] //定义参数 } //2.创建路由对象，绑定routes(routes内部是 组件和 路径) var router = new VueRouter({ routes: [{ path: "/login", name: 'login', component: Login }, { path: "/order", name: 'order', component: Order }, //路径后面携带参数（/:参数名），props属性：是否显示参数值 { path: "/register/:str", name: 'register', props: true, component: Register } ] }) //3.创建Vue对象 //to就是参数名；登录使用 查询参数 传参，注册使用 路由参数 传参 new Vue({ el: '#app', router, template: ` <div> <router-link :to="{name:'login',query:{id:'1111111'}}">登录</router-link> <router-link :to="{name:'register',params:{str:'注册数据'}}">注册</router-link> <div> <button @click='toShow'>跳转订单界面</button> </div> <router-view></router-view> </div> `, methods: { //使用js跳转并传参 toShow() { this.$router.push({ path: '/order', query: { id: '2332323' } }); } } }) </script> </html>
六、vue 嵌套路由
-
嵌套路由简介
<router-view :key="$route.fullPath"></router-view>
代码思想：1:router-view的细分，router-view第一层中，包含一个router-view 2:每一个坑挖好了，要对应单独的组件路由配置：
routes: [{ path:'/nav', name:'nav', component:Nav, //路由嵌套增加此属性 children:[ //在这里配置嵌套的子路由 ] }] -
代码案例（首页下面的导航栏）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 嵌套路由</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 = { //模板里面必须加<router-view></router-view>进行页面渲染 template: ` <div> <router-view></router-view> <router-link :to="{name:'navigation.index'}">首页</router-link> <router-link :to="{name:'navigation.pensonal'}">个人中心</router-link> <router-link :to="{name:'navigation.message'}">咨询</router-link> <router-link :to="{name:'navigation.mine'}">我的</router-link> </div> ` } //2.自定义组件 var Index = {template: `<div>首页</div>`} var Pensonal = {template: `<div>个人中心</div>`} var Message = {template: `<div>咨询</div>`} var Mine = {template: `<div>我的</div>`} //3.创建路由对象，绑定routes var router = new VueRouter({ routes:[ {path:'',redirect:'/navigation'}, //嵌套路由 { path:'/navigation', name:'navigation', component:Navigation, //嵌套路由时必须写children children:[ {path:'',redirect:'/navigation/index'}, //配置嵌套路由 {path:'index',name:'navigation.index',component:Index}, {path:'pensonal',name:'navigation.pensonal',component:Pensonal}, {path:'message',name:'navigation.message',component:Message}, {path:'mine',name:'navigation.mine',component:Mine} ] } ] }) //4.创建Vue对象 new Vue({ el:'#app', router, template:` <div> <router-view></router-view> </div> ` }) </script> </html>
2531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
