-
hash和history模式的设定
mode:'history',
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})
-
router-link
其实就是导航，根据to属性去匹配对应的组件，然后渲染到正确位置。
如果用a标签，页面会发生跳转。默认router-link会渲染成a标签；
- tag="要生成的标签名"，页面会生成指定的标签；并且不需要自己监听事件，vue-router都自动监听;
<router-link :to="{path:'/home'}" tag="li">
<i></i><span>home</span>
</router-link>
- to:要跳转到的目标文件；可以用':to'，去动态绑定;
<router-link :to="index">home</router-link>
<!--对象形式-->
<router-link :to="{path:'/home'}">home</router-link>
export default {
data(){
return {
index : '/home'
}
}
}
- tag:设置生成指定的标签
<router-link :to="{path:'/home'}" tag="div">home</router-link>
- linkActiveClass : 设置导航激活的class
new Router({
mode:'history',
linkActiveClass:'isActive',
]
})
- active-class : 设置单独的、独有的自己的激活状态颜色（比如每个导航激活颜色不同）
<router-link to="/document" tag="li" active-class="activeClass">document</router-link>
- event : 指定事件
<router-link :to="{path:'/home'}" event="mouseover" tag="li">home</router-link>
- name : 为组件命名
如果路径很多，在每个router上都写路径，而且如果路径嵌套复杂，就会一不小心就出错，而且很麻烦，这个时候就可以给每个组件添加name属性
<router-link :to="{name:'study'}" >
-
重定向
比如用户输入了一个错误的路径，常见的就是给出一个404或者跳转到首页。
{
path: '*',
//直接渲染一个组件 component: noFound
//重定向 : 直接定到指定的组件 redirect : '/home'
//redirect : {path:'/home'}
//利用组件上的name redirect:{name : 'document'}
redirect:(to)=>{
//to:目标路由对象，就是访问的路径的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}
}
}
-
别名 ： alias
比如，你在地址栏输入了/index,希望这个地址渲染的是home，这个时候就可以在组件的配置上写别名
routes: [
{
path: '/home',
name: 'home',
component: home,
alias : '/index'
}
]
-
exact：其他路径被点亮的时候去掉根路径的active
<router-link exact to="/" >
routes: [
{
path: '/',
component: home,
}
]
-
嵌套路由的使用(在父路由中切换)
图示：
image.png
注意，如果路由中，有了子路由，就不要把name给父路由设置，直接设置子路由即可，否则浏览器会警告提示。
{
path: '/about',
//如果有默认子路由，父级就不要设置name了 name: 'about',
component: about,
children:[
{
//默认子路由
path : '',
name : study,
component : study
},
{
path : 'hobby',
name : hobby,
component : hobby
},
{
path : 'work',
name : work,
component : work
}
]
}
- 路径设置：现在about下面有三个组件，如果现在想实现：进入一个子理由的时候，地址栏不显示其父路由（about/work==>/work）,这时只需要在子路由path中加一个/（/的意思是相对根路由）
{
path : '/hobby',
name : 'hobby',
component : hobby
}
-
命名视图
image.png
概念：就是对router-view标签起一个名字；
使用场景：当遇到同一个单页面组件里，需要出现两个或多个router-view时，就需要对标签命名了；
命名方法：
通过name属性起名
<router-view name="slider"></router-view>
new VueRouter({
routes:[
{
path:'/document',
components:{
default:document， //default为默认组件
slider:slides
//slider:写的是标签中的name值；
//slides：写的是slides这个名字的.vue文件，需要引入到页面中
}
}
]
});
注意：是在对应的路由中添加；
-
滚动行为：
浏览器滚动默认行为说明：当页面滚动到一定位置后，手动刷新浏览器，会发现页面依然在之前滚动位置，这是浏览器记录滚动位置的默认行为；
需求：点击浏览器的前进和后退的按照时，让打开的页面，保持在之前页面滚动的位置；
步骤：
new VueRouter({
scrollBehavior(to,from,savedPosition){//滚动行为，在点击浏览器的前进后退或切换导航时，触发
//to:要进入的目标路由对象 (要去哪里)
//from:离开的路由对象 (从哪里来)
//savadPosition：记录当前滚动位置滚动条的坐标，点击前进后退时，坐标值 {x:0,y:0}
if(savePosition){
return savePosition; //这样就可以定位到之前的位置啦
}else{
return {x:0,y:0}
}
}
});
-
动态路径：
不同的路径（路由），映射同一个组件。比如进了一个网站，到了个人信息页面中，每个人信息页面其实一样的，只是不同等级的用户展示的数据不同，这个时候就可以用到动态路径。匹配到的所有路由，全都映射到同一个组件。
场景： 根据不同用户展示不同的信息。
实现思路 ： 这个时候其实用的是同一个组件，只是展示的数据不同。首先需要在导航标签（router-link）的to属性上设置成动态的，也就是不同的用户数据拼接而成，然后在组件上配置同样的参数，这个时候就可以用路由信息对象获取到用户的id，如果获取的id和数据里的某一项id相同，就把这条数据放入自己在data数据中新建的json上，数据绑定的是这个json
image.png
- 动态路径参数,以冒号开头
路径：/user/:userId ==>：userId为动态路径参数
userId可以使用正则符表示
如：
匹配 /user/:userId 有userId和没有userId的都需要匹配上，可以写成：
path:/user/:userId?
说明 ： 这里的userId？表示有userId和无userId都能匹配
注意：在路由path中，添加动态参数方法是 (:参数名)，这里可以加多个；
如：user/:userId/:tip
{
/*
这个userId是自己随意定义的，:userId意思就是动态的，当访问user后面嵌套一个路径的时候，
这个userId就等于标签里写好的名字
:to="'/user/'+item.id"
*/
// 这里的userId？表示有userId和无userId都能匹配,/user和/user/1 都可以匹配
/*
********思路**********：
1、通过路径，就可以拿到userId，拿到userId，就可以找到对应的用户信息；
2、怎么拿到userId ？ 只需要拿到路由信息，就可以拿到这个值了。
3、怎么拿到路由信息？看下一个API ：对组件注入.
*/
path: '/user/:userId?', //user/1 user/2
component: user,
},
-
如何拿到动态路由的信息：对组件的注入&获取参数：路由信息对象的params
一个 route object（路由信息对象） 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。
通过在VUE根实例的router配置传入router实例
- $router router实例对象
- $router 当前激活的路由信息对象，每个组件实例都会有；
- beforeRouterEnter() 进入组件前钩子函数
- beforeRouterLeave() 离开组件前钩子函数
贴$route源码如下 ：
export default {
watch : {
$route(){
let id = this.$route.params.userId;
for(var i = 0;i<this.userList.length;i++){
if(id==this.userList[i].id){
this.userInfo=this.userList[i]
}
}
}
},
created(){
//复用这个组件，这个函数不会再次被调用了,所以需要用watch监控
//地址一但发生变化 ，$route会重新生成一个路由信息对象
//:this.$route.params.userId这样就得到了动态参数userId ： path: '/user/:userId?',
let id = this.$route.params.userId;
for(var i = 0;i<this.userList.length;i++){
if(id==this.userList[i].id){
this.userInfo = this.userList[i]
}
}
}
}
image.png
-
查询字符串：
带查询参数的链接地址，称为：查询字符串。
//下面的结果为 /user?info=share
<router-link :to="{ path: '', query: { info: 'share' }}">分享</router-link>
链接地址为：/user?info=share
在切换router-link时，如何获取查询字符串中，info=share的share字符串？
通过路由信息对象中的query对象，用于URL查询参数的对象；
-
过渡动效：
router 提供了transition的封装组件，添加过渡动画
控制方法：会用CSS类名控制
image.png
- 使用方法：
将需要添加过渡效果的router-view包在transition标签中；如下 ：
<transition>
<router-view></router-view>
</transition>
- 过渡模式：
in-out: ： 新进行过渡，完成之后当前元素过渡离开
out-in：当前元素先进行过渡，完成之后新元素过渡进入
使用方法如下：
<transition mode="输入模式名">
<router-view></router-view>
</transition>
- 案例 ：
<transition mode="out-in">
<router-view class="center"/></router-view>
</transition>
.v-enter{
opacity:0
}
.v-enter-to{
opacity:1
}
.v-enter-active{
transition:1s
}
.v-leave{
opacity:0
}
.v-leave-to{
opacity:1
}
.v-leave-active{
transition:0
}
//以下的切换形式需要在transition上设置name属性，值为left
.left-enter{
transform:translateX(100%)
}
.left-enter-to{
transform:translateX(0)
}
.left-enter-active{
transition:1s
}
.left-leave{
transform:translateX(0)
}
.left-leave-to{
transform:translateX(-100%)
}
.left-leave-active{
transition:1s
}
-
编程式的导航：
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
- back：回退一步
- forward : 前进一步
<input type="button" value="后退" @click="backHandel">
<input type="button" value="前进" @click="forwardHandel">
methods:{
backHandel(){
this.$router.back()
},
forwardHandel(){
this.$router.forward()
}
}
- go : 指定前进回退步数
goHandel(){ //控制的是前进后退事件的步数
this.$router.go(-1) //正数前进，负数后退
}
- push : 导航到不同url，向history栈添加一个新的记录
- replace : 导航到不同url,替换history栈中当前记录
<input type="button" value="控制指定的导航push" @click="pushHandel">
<input type="button" value="控制指定的导航replace" @click="replaceHandel">
pushHandel(){ //跳转到指定的路径
this.$router.push('/document') //正数前进，负数后退
},
replaceHandel(){
this.$router.replace('/document')
}
-
路由元信息：
在路由配置中meta可以配置一些数据，用在路由信息对象中。
- 访问meta中的数据：$route.meta
- 路由meta的设置方法：(在路由对象中配置)
routes:[
{
path:'/',
meta:{
index:0;//路由的下标
}
}
]
如果路由中有子路由，就配置到默认的子路由中，不用配置到父路由中；
页面中获取方法：
$route.meta.index
- 通过监听$route，得到目标和离开导航的下标
watch:{
$route(to,from){
to.meta.index //目标导航下标
from.meta.index //离开导航下标
}
}
-
导航钩子函数（全局级）
导航发生变化时，导航狗子主要用来拦截导航，让它完成跳转或取消。(例如：如果用户没有登录，就跳转到登录组件)
- 执行钩子函数位置（书写位置）
router全局
单个路由
组件中 - 钩子函数
router实例上：beforeEach，afterEach
单个路由中：beforeEnter
组件内的钩子：beforeRouterEnter,beforeRouteUpdata,beforeRouteLeave
- 钩子函数接收的参数
to:要进入的目标路由对象，到哪里去
from:正要离开导航的里有对象，从哪里来
next:用来决定跳转或取消导航
{
path: '/document',
name: 'document',
meta:{
index:1,
login:true,
title : 'document'
}
}
router.beforeEach((to,from,next)=>{ //目标路径，源路径，进入导航
next() //必写，否则组件不会被渲染，参数写false,组件不会被渲染
if(to.meta.login){ //如果meta的login是true,那么表示没有登录，跳转到login
next('/login')
}else{
next() //否则就是登录了，渲染组件即可
}
})
router.afterEach((to,from,next)=>{
if(to.meta.title){//如果title存在，就改成组件自己的meta内的title
window.document.title = to.meta.title
}else{
window.document.title = 'miaoei'
}
})
