初衷
最近想尝试一下vue框架的使用,但是没有足够的时候一点点去看它的具体使用,就找了一个实战的网课看了一下,主要是vue2+vant,并跟着做了一遍,vue和angular相似的地方还是比较多的,具体的使用我也不打算记录了,简单的记录一下vue-router的配置吧~(主要是肉体可知的记忆力在下降,不得不进行烂笔头行动😭)
vue-router的安装
npm install vue-router --save-dev
项目结构目录中路由文件的介绍
我们使用vue-cli生成我们的项目结构,src/router/index.js文件就是路由的核心文件,我们来简单看一下这个文件是怎么样统筹整个项目路由的~
通过这些路由的配置我们就可以通过http://localhost:8080/#/register、http://localhost:8080/#/login分别访问到注册和登录页面啦~
使用<router-link>标签来制作导航
<template>
<div id="app">
// 模板插入位置
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
background-color: #fefefe;
}
</style>
// 1.像普通a标签一样进行路由的跳转
<p>导航 :
<router-link to="/">首页</router-link>
<router-link to="/register">注册页面</router-link>
</p>
// 2.业务逻辑代码中,可以通过使用编程式路由进行跳转
this.$router.push('/register')
vue-router配置子路由
使用场景
其实在日常开发中配置子路由是很常见的一种情况,当某个页面隶属于某个模板的时候我们就需要配置子路由了~
以我最近实战的项目为例子,我希望在首页上有个可以切换不同内容的footer组件,这些切换的内容就是作为首页的子路由,
我们来看一下相关代码的配置:
import Vue from 'vue'
import Router from 'vue-router'
import ShoppingMall from '@/components/pages/ShoppingMall' // @符号就是表示src
import Register from '@/components/pages/Register'
import Login from '@/components/pages/Login'
import Goods from '@/components/pages/Goods'
import CategoryList from '@/components/pages/CategoryList'
import Cart from '@/components/pages/Cart'
import Member from '@/components/pages/Member'
import Main from '@/components/pages/Main'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Main',
component: Main,
// 这里的子路由会加载到父组件main的router插槽中
children: [ //children组件就是专门来配置子路由的啦
{
path: '/',
name: 'ShoppingMall',
component: ShoppingMall
},
{
path: '/categoryList',
name: 'CategoryList',
component: CategoryList
},
{
path: '/cart',
name: 'Cart',
component: Cart
},
{
path: '/member',
name: 'Member',
component: Member
}
]
},
// 这里的路由会加载到app中的router插槽中
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/goods',
name: 'Goods',
component: Goods
},
]
})
vue-router的参数传递
参数传递同样是一个很基本的业务,日常开发中页面的跳转,通过Url传参,大家在实际使用中也是经常碰到的吧~ 我们来看看vue提供几种路由传参的形式~
通过name传递参数
1.路由配置
routes: [
{
path: '/',
name: 'Register', // 配置name属性
component: Register
}
]
2.页面获取
<p>{{ $route.name }}</p> // 通过$route.name进行接收
通过<router-link>标签中的to传参
其实我们多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要注意的是这里的to要进行一个绑定,写成:to
1.标签上直接设置
<router-link :to="{name:'Register',params:{key:value}}">value</router-link>
2.页面获取
<p>{{$route.params.username}}</p> // 在使用的模板中接收
name:就是我们在路由配置文件中起的name值。
params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
通过url进行传参
:冒号的形式传递参数
1. 路径上设置
{
path:'/params/:newsId/:newsTitle',
component:Params
}
2.页面上传入相关参数
<router-link to="/params/168/set params">params</router-link>
3.页面获取
<template>
<div>
<h2>{{ msg }}</h2>
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
</div>
</template>
编程式导航的params进行参数的传递
1. 在函数中传入参数(2种形式)
1.1 this.$router.push({name: 'Goods', params:{goodsId: id}}) //使用name就得用户编程式导航的params进行参数的传递
1.2 this.$router.push({path:'/Goods', query: {goodsId: this.goodsId}}) // 如果使用的时候path: /goods则使用的就是query
2.接收的地方(一般是在created生命周期函数里,根据传入的形式不同,获取也是不同的)
this.goodsId = this.$route.query.goodsId ? this.$route.query.goodsId : this.$route.params.goodsId
单页面多路由区域的操作
这种就是在一个页面上,有多个路由区域,我们直接通过截图,看看相关代码
路由的配置
vue-router的重定向
当我们在开发中,设置的路径不一样,却希望跳转的页面是相同的,这个时候我们就需要使用路由重定向了
基本重定向
// 只需要将原来的component换成redirect参数
export default new Router({
routes: [
{
path: '/',
component: Hello
},{
path:'/register',
component:Register
},{
path:'/goback', // 直接redirect到path:’/’路径下
redirect:'/'
}
]
})
重定向时传递参数
// 只需要在redirect后边的参数里复制重定向路径的path参数就可以
export default new Router({
routes: [
{
path: '/',
component: Hello
},{
// Vue的是支持在路径中使用正则表达式的,我们只需要用()进行包裹,这里就表示只能使用户数字类型的Id
path:'/params/:newsId(\\d+)',
component:Params
},{
path:'/goParams/:newsId(\\d+)',
redirect:'/params/:newsId(\\d+)'
}
]
})
路由别名alias
使用alias别名的形式,我们也可以实现类似重定向的效果。
1. 配置
{
path: '/menu',
component: Menu,
alias:'/list' // 页面显示的路径仍然是/list 但是UI加载是是menu组件
}
2.使用
<router-link to="/list">jspang</router-link>
redirect和alias的区别
redirect:redirect是直接改变了用户输入的url的值,把url变成了真实指向的path路径。
alias:用户输入的url路径没有被改变,这种情况更友好,让用户知道自己访问的路径,只是改变了UI的内容。
alias使用的注意事项
别名请不要用在path为'/'中,vue不支持这样使用
路由的过渡动画效果
// 想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性
<transition name="fade">
<router-view ></router-view>
</transition>
fade-enter: 进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
fade-enter-active: 进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
fade-leave: 离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
fade-leave-active: 离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。
匹配404
{
path:'*', // 表示找不到对应路径的时候 则加载Error页面
component:Error
}
路由钩子
我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也有钩子函数。路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中
1.当写在路由配置文件中
2.在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时,先来看一段具体的代码:
{
path:'/params/:newsId(\\d+)',
component: Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
}
to: 路由将要跳转的路径信息,信息是包含在对像里边的。
from: 路径跳转前的路径信息,也是一个对象的形式。
next: 路由的控制参数,常用的有next(true)和next(false)。
// 在组件模板中使用
export default {
name: 'params',
data () {
return {
msg: 'params page'
}
},
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}
}
</script>
beforeRouteEnter:在路由进入前的钩子函数。
beforeRouteLeave:在路由离开前的钩子函数。
总结
大概就记录这些吧~ 用到的时候就翻过来看看🤦♀️ 之前专注力不好的时候,我感觉记录是最能让我聚精会神的,但是今天还是走神了~ 如有出错,还请指出🤝