前端路由
根据不同的 url 地址展示不同的内容或页面,无需依赖服务器根据不同URL进行页面展示操作
优点
- 用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点
- 使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存
- 单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置
一、路由(以user为例)
userList-->用户列表页的路由所加载的代码(router-->index.js)
import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入vue-router
import userList from '@/components/userList' //引入根目录下的user.vue组件
Vue.use(Router) //vue全局使用Router
export default new Router({
routes: [ //配置路由,这里是个数组
{
path: '/userList', //链接路径
name: 'userList', //路由名称
component: userList //对应的组件模板
}
]
})
userList-->用户列表页代码(userList.vue)
<template> <div>展示用户列表页</div> </template> <script> export default { name: 'userList', data () { return { msg: '' } } } </script> <style scoped> </style>
打开网址:http://localhost:8080/#/userList 显示如上模板解析页。
注意:其中 # 为哈希,mode:hash 若要用原始类型的网址,则mode:history。
二、动态路由匹配
模式 | 匹配路径 | 获取动态路由参数 |
/user/:username | /user/nina | $route.params.username |
/user?:username | /user?username=nina | $route.query.username |
还是以userList为例
创建一个 userList 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。所以,我们需要在 vue-router 的路由路径中使用『动态路径参数』来达到这个效果。
userList-->用户列表页的路由所加载的代码(router-->index.js)
import Vue from 'vue' import Router from 'vue-router' import userList from '@/components/userList' Vue.use(Router) export default new Router({ routes: [ { path: '/userList/:userId', //动态设置路由参数 name: 'userList', component: userList } ] })
user-->用户列表页代码(userList.vue)
<template> <div> <div>展示用户列表页</div> <div>用户ID</div> <span>{{$route.params.userId}}</span> //获取用户userId </div> </template> <script> export default { name: 'userList', data () { return { msg: '' } } } </script> <style scoped> </style>
打开网址:http://localhost:8080/#/userList/0006 可以看到用userList组件渲染出来的userId显示在页面上。
三、嵌套路由
选项卡,在选项卡中,顶部有数个导航栏,中间显示的是主体内容,这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由。
用户信息列表页,在用户信息列表中,会有用户的基本信息页,用户的密码修改页等也需要路由的嵌套
以userList列表页为例
userList-->用户列表页的路由所加载的代码(router-->index.js)
import Vue from 'vue' import Router from 'vue-router' import userList from '@/components/userList' import userInfo from '@/components/userInfo' import changePaw from '@/components/changePaw' Vue.use(Router) export default new Router({ routes: [ { path: '/userList', name: 'userList', component: userList, children:[ { path:'userInfo', name:'userInfo', component:userInfo }, { path:'changePaw', name:'changePaw', component:changePaw } ] } ] })
useruserList-->用户列表页代码(userList.vue)
<template> <div> <div>展示用户列表页</div> <router-link to="/userList/userInfo">用户基本信息页</router-link> //to后必须用绝对地址 <router-link to="/userList/changePaw">修改密码页</router-link> <div> <router-view></router-view> </div> </div> </template> <script> export default { name: 'userList', data () { return { msg: '' } } } </script> <style scoped> </style>
两个子页面-->用户基本信息页(userInfo.vue)
<template> <div> <div>用户基本信息页</div> </div> </template> <script> export default { name: 'userInfo', data () { return { msg: '' } } } </script> <style scoped> </style>
两个子页面-->用户修改密码页(changePaw.vue)
<template> <div> <div>用户修改密码页</div> </div> </template> <script> export default { name: 'changePaw', data () { return { msg: '' } } } </script> <style scoped> </style>
打开网址:http://localhost:8080/#/userList 可以看到用userList组件渲染出来页面上,有两个导航(用户基本信息页、用户修改密码页)可以来回切换
四、编程式路由
通过js来实现页面的跳转
- $router.push("name")
- $router.push({path:"name"})
- $router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
- $router.go(1)
(1)先用常用的<router-link>为例
以userList列表页为例,添加跳转到产品中心的链接。
userList-->用户列表页的路由所加载的代码(router-->index.js)
import Vue from 'vue' import Router from 'vue-router' import userList from '@/components/userList' import productCenter from '@/components/productCenter' Vue.use(Router) export default new Router({ routes: [ { path: '/userList', name: 'userList', component: userList, }, { path:'/productCenter', name:'productCenter', component:productCenter } ] })
useruserList-->用户列表页代码(userList.vue)
<template> <div> <div>展示用户列表页</div> <router-link to="/productCenter">产品中心页</router-link> </div> </template> <script> export default { name: 'userList', data () { return { msg: '' } } } </script> <style scoped> </style>
产品中心页(productCenter.vue)
<template> <div> <div>产品列表页</div> </div> </template> <script> export default { name: 'productCenter', data () { return { msg: '' } } } </script> <style scoped> </style>
打开网址:http://localhost:8080/#/userList 可以看到用userList组件渲染出来页面上,有个跳转导航(产品中心页),点击可以跳转到产品中心页。
(2)$router.push("name") ==》其中如例一中,只改变userList.vue中的跳转方式
<template> <div> <div>展示用户列表页</div> <button @click="jump">产品中心页</button> //添加跳转事件 </div> </template> <script> export default { name: 'userList', data () { return { msg: '' } }, methods:{ jump(){ this.$router.push('/productCenter') //应用js跳转事件进行跳转 } } } </script> <style scoped> </style>
(2)$router.push({path:"name"}) ==》其中如例一中,只改变userList.vue中的跳转方式
<template> <div> <div>展示用户列表页</div> <button @click="jump">产品中心页</button> </div> </template> <script> export default { name: 'userList', data () { return { msg: '' } }, methods:{ jump(){ this.$router.push({path:'/productCenter'}) } } } </script> <style scoped> </style>
(3)$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
==》其中如例一中,只改变userList.vue中的跳转方式,并在产品中心页(productCenter.vue)接收参数用query接收
userList.vue
<template> <div> <div>展示用户列表页</div> <button @click="jump">产品中心页</button> </div> </template> <script> export default { name: 'userList', data () { return { msg: '' } }, methods:{ jump(){ this.$router.push({path:'/productCenter?userId=0001'}) } } } </script> <style scoped> </style>
productCenter.vue-->接收传过来的参数
<template> <div> <div>产品列表页</div> <div>接收参数 <span>{{$route.query.userId}}</span> //接收页面切换过来的参数 </div> </div> </template> <script> export default { name: 'productCenter', data () { return { msg: '' } } } </script> <style scoped> </style>
注意组件与组件之前路由切换的时候传递用params
页面之间的切换(比如?拼接的方式)传递用jquery
五、命名路由和命名视图
- 给路由定义不同的名字,根据路由的名字进行匹配
- 给不同的router-view定义名字,通过名字进行对应组件的渲染
(1)命名路由
以userList列表页为例,添加跳转到产品中心的链接。
userList-->用户列表页的路由所加载的代码(router-->index.js)
import Vue from 'vue' import Router from 'vue-router' import userList from '@/components/userList' import productCenter from '@/components/productCenter' Vue.use(Router) export default new Router({ routes: [ { path: '/userList', name: 'userList', component: userList, }, { path:'/productCenter', name:'productCenter', //定义路由的名字 component:productCenter } ] })
useruserList-->用户列表页代码(userList.vue)
<template> <div> <div>展示用户列表页</div> <router-link v-bind:to="{name:'productCenter'}">产品中心页</router-link> //跳转到与路由名字相同的路由地址 </div> </template> <script> export default { name: 'userList', data () { return { msg: '' } } } </script> <style scoped> </style>
产品中心页(productCenter.vue)
<template>
<div>
<div>产品列表页</div>
</div>
</template>
<script>
export default { name: 'productCenter', data () { return { msg: '' } } } </script> <style scoped> </style>
(2)跳转到产品中心的路由为动态路由
userList-->用户列表页的路由所加载的代码(router-->index.js)
import Vue from 'vue' import Router from 'vue-router' import userList from '@/components/userList' import productCenter from '@/components/productCenter' Vue.use(Router) export default new Router({ routes: [ { path: '/userList', name: 'userList', component: userList, }, { path:'/productCenter/:userId', //为动态路由 name:'productCenter', component:productCenter } ] })
useruserList-->用户列表页代码(userList.vue)
<template>
<div>
<div>展示用户列表页</div>
<router-link v-bind:to="{name:'productCenter',params:{userId:0001}}">产品中心页</router-link> //跳转到与路由名字相同的路由地址,params是路由的参数,不是页面跳转参数
</div>
</template>
<script>
export default { name: 'userList', data () { return { msg: '' } } } </script> <style scoped> </style>
(2)命名视图
路由所加载的代码(router-->index.js)
import Vue from 'vue' import Router from 'vue-router' import userList from '@/components/userList' import userInfo from '@/components/userInfo' import changePaw from '@/components/changePaw' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'userList', components: { default:userList, userInfo:userInfo, changePaw:changePaw } } ] })
App.vue-->再浏览器输入根网址后,页面会展示出路由所加载的所有页面信息。
<template> <div id="app"> <span>ddddddddddddddddddd</span> <router-view class="main"></router-view> <router-view class="left" name="userInfo"></router-view> <router-view class="right" name="changePaw"></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
路由中的meta
meta字段(元数据)
直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了
{
path: '/actile', name: 'Actile', component: Actile, meta: { login_require: false }, }, { path: '/goodslist', name: 'goodslist', component: Goodslist, meta: { login_require: true }, children:[ { path: 'online', component: GoodslistOnline } ] }
这里我们只需要判断item下面的meta对象中的login_require是不是true,就可以做一些限制了
router.beforeEach((to, from, next) => { if (to.matched.some(function (item) { return item.meta.login_require })) { next('/login') } else next() })