文章目录
Vue-router(单页面路由)
Vue-router的安装
· 1. 直接下载使用
下载地址:https://unpkg.com/vue-router/dist/vue-router.js
使用,在页面
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
因为需要依赖 vue所以需要导入
2. 使用Npm安装到本地,或者安装到全局
npm i -S vue-router
然后同样的方式引入即可。
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
你如果是工程化构建的目录,需要在添加use,注册VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
使用vue-router(路由)
<div id="box">
<a href="#/login">登陆</a>
<a href="#/register">注册</a>
<router-view></router-view>
</div>
<script>
/**要想有路由第一步
* 1 srcipt引入路由文件或者(工程目录)use注册
* 2 实例化router 添加监听 routes 添加监听路径 path,注册监听显示的组件
* 3 将 实例化router对象 注册到vm的router中
* 4 在页面中写占位符 router-view
*/
// 这是登陆页模板组件对象
let login ={
template:"<div>这是登录页模板</div>"
}
// 这是注册页的模板对象
let register ={
template:"<div>这是注册页的模板</div>"
}
//实例化路由对象
let RouteObj = new VueRouter({
routes:[//这里是吧router去r变s表示多个路由规则
{path:'/login',component:login},
{path:'/register',component:register}
]
})
let vm = new Vue({
el:"#box",
router:RouteObj //将实例对象注册到vm中
})
</script>
使用 router-link
为什么要用这个。因为在a标签中写路径 #/***,不是很麻烦,所以router提供了一个占位符
router-link,解析会默认解析为a标签。可以指定解析,用tag。路径就用to,这样写
<!-- <a href="#/login">登陆</a>
<a href="#/register">注册</a> -->
<router-link to="/login" tag="span">登陆</router-link><!--tag 指定解析成的元素 to跳转的hash地址-->
<router-link to="/register" tag="span">注册</router-link>
路径的重定向
当你打开网页的时候是不是路径就是(#/)是这样的
我们肯定是希望,打开就是登陆,所以,就要监听路径,当有#/这个路径,就redirect到#/login
//实例化路由对象
let RouteObj = new VueRouter({
routes:[//这里是吧router去r变s表示多个路由规则
{path:'/',redirect:'/login'},//路径重定向
{path:'/login',component:login},
{path:'/register',component:register}
]
})
更改激活状态的显示,原来是有内置的class名(router-link-active)
想更改这个内置的名,
第一种最暴力的就是把名字拿过来直接添加样式,
第二种官方也提供了一个方法,在构造函数中添加配置项,
linkActiveClass=“clsaaname”,这样就可以更改激活状态的名字,用自己定义的class名字去定义状态显示
//实例化路由对象
let RouteObj = new VueRouter({
routes:[//这里是吧router去r变s表示多个路由规则
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
],
linkActiveClass:'active',
})
使用router中的keep-alive,缓存组件。减少页面二次渲染
这是利用vue2.0版本中keep-alive的 inclide(包含缓存)和exclude(排除缓存)
<div id="box">
<router-link to="/login" tag="span">登陆</router-link>
<!--tag 指定解析成的元素 to跳转的hash地址-->
<router-link to="/register" tag="span">注册</router-link>
<keep-alive exclude="reg"> <!--include='name'要缓存的 exclude="reg"不被缓存的 -->
<router-view ></router-view>
</keep-alive>
<!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->
</div>
<script>
// 这是登陆页模板组件对象
let login = {
name:'log',
template: "<div>这是登录页模板</div>"
}
// 这是注册页的模板对象
let register = {
name:'reg',
template: "<div>这是注册页的模板</div>"
}
//实例化路由对象
let RouteObj = new VueRouter({
routes: [ //这里是吧router去r变s表示多个路由规则
{
path: '/login',
component: login,
},
{
path: '/register',
component: register,
}
],
})
let vm = new Vue({
el: "#box",
router: RouteObj //将实例对象注册到vm中
})
</script>
如果用的是vue1.0的版本的话
<div id="box">
<router-link to="/login" tag="span">登陆</router-link>
<!--tag 指定解析成的元素 to跳转的hash地址-->
<router-link to="/register" tag="span">注册</router-link>
<keep-alive> <!--include='name'要缓存的 exclude="reg"不被缓存的 -->
<router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
<script>
// 这是登陆页模板组件对象
let login = {
name:'log',
template: "<div>这是登录页模板</div>"
}
// 这是注册页的模板对象
let register = {
name:'reg',
template: "<div>这是注册页的模板</div>"
}
//实例化路由对象
let RouteObj = new VueRouter({
routes: [ //这里是吧router去r变s表示多个路由规则
{
path: '/login',
component: login,
meta:{
keepAlive:true //需要缓存
}
},
{
path: '/register',
component: register,
meta:{
keepAlive:false
}
}
],
})
let vm = new Vue({
el: "#box",
router: RouteObj //将实例对象注册到vm中
})
</script>
给组件添加动画效果
先给大家说一下步骤,在后面会专门讲到动画是怎么用的。
第一步 用transition把需要动画的组件包起来
<transition mode='out-in'>//mode='out-in'这是过渡样式
<router-view></router-view>
</transition>
第二步,添加过渡样式
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(140px)
}
.v-enter-active,.v-leave-active{
transition:all 0.5s ease;
}
这样就可以了,先讲一点动画
在进入/离开的过渡中,会有 6 个 class 切换。
分为两个半场动画,进入和离开
-
enter进入
- v-enter:进入前 ( opacity: 0;)
- v-enter-active: 进入时 ( opacity: 1;)
- v-enter-to:进入后
-
leave 离开
- v-leave: 离开前
- v-leave-active:离开时( opacity: 1;)
- v-leave-to: 离开后 ( opacity: 0;)
路由匹配中传参数
在点击的按钮触发匹配,然后带个参数,匹配规则不变,可以传递参数过去
- query
<router-link to="/login?id=20" tag="span">登陆</router-link>
按钮把值交给实例对象,实例对象正则匹配出值。放在query中
// 这是登陆页模板组件对象
let login ={
template:"<div>这是登录页模板{{$route.query.id}}</div>",
created() {
console.log(this.$route.query.id)
},
}
- params
匹配带有id的路径
<router-link to="/login/20&张三" tag="span">登陆</router-link>
一个是自己设置好,一个是在匹配路由中设置规则。
{path:'/login/:id&:name',component:login},
路由的嵌套 children
写这代码遇到很多坑,我自己一直迷。既然是路由的嵌套。肯定要有
两个,不然怎么去区分到底填到哪个内容里?
<div id="box">
<router-link to='/father'>father</router-link>
<router-view></router-view>
</div>
<template id="father">
<div>
<h1>这是父级路由</h1>
<router-link to='/father/son1'>儿子1</router-link>
<router-link to='/father/son2'>儿子2</router-link>
<router-view></router-view>
</div>
</template>
<script>
let fathers = {
template: '#father'
}
let son1s ={
template:"<div>儿子1</div>"
}
let son2s ={
template:"<div>儿子2</div>"
}
let RouterObj = new VueRouter({
routes: [{
path: '/father',
component: fathers,
children:[
{path:'son1',component:son1s},
{path:'son2',component:son2s}
]
}]
})
let vm = new Vue({
el: '#box',
router: RouterObj
})
</script>
路由终结案例,经典的网站页面
* {
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 100px;
background: pink;
}
.main{
display: flex;/* 弹性盒子 */
height: 300px;
}
.left{
flex: 2;
background: red;
}
.right{
flex: 8;
background: skyblue;
}
<div id="box">
<router-view class="top"></router-view>
<div class="main">
<router-view name="left" class="left"></router-view>
<router-view name='right' class="right"></router-view>
</div>
</div>
<script>
let tops = {
template: '<div>top</div>'
}
let left = {
template: '<div>left</div>'
}
let right = {
template: '<div>right</div>'
}
let routerObj = new VueRouter({
routes: [{
path: '/',
components: {
default: tops,//默认加载
left: left, //前面是name 后面的组件名
right: right
}
}]
})
let vm = new Vue({
el: '#box',
router: routerObj
})
</script>
到这就结束了还有一个动画马上就开始讲
点击这里直接跳转到
**
vue动画的实现
**