vue路由 vue-router

学习vue时 整理的一些东西

路由器

//获取相关数据
$route.name

路径绑定

//绑定路径
<router-link :to="{name:'Home',params:{id:123}}">Home</router-link>
//页面调用
{{$route.params.id}}

//path query 一起使用
<router-link :to="{path:'/user/sea',query:{aaa:'bbb'}}"></router-link>

//页面获取
{{ $route.query.aaa }} //-> 获取到 bbb

//name params 一起使用
<router-link :to="{name:'Home', params:{id:123}"></router-link>

//页面获取
{{ $route.params.id }} //-> 获取到 123

redirect:'home' //路由重定向
{
    path: '/ccc/:id',
    alias:'/bieming' //别名
    redirect:xxxx => {
        const {hash,params,query} = xxxx;
        if (params.id == '001'){
            return '/'
        }
    }
}

{path:'/alias',alias:'/bieming'} //点击这个路径是到/alias，通过别名后则是到/ccc/:id

alias 别名
alias:'/aaa',
alias:['/aaa','/bbb']

路由的过渡动画

<transition name="fade">
    <router-view></router-view>
</transition>

//css
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

路由的404

routes:[
    {path: '/', component:Home},
    {path: '*', component:page404} //必须放在路由的最后面
]

路由的钩子

{path: '/parent', component:Home,
    beforeEnter:(to,from.netx) =>{
        console.log(to)
        console.log(from)
        next(false) //默认true 
    }
}

导航按钮

<template>
<button @click="fanhui">后退</button>
<button @click="qianjin">前进</button>
<button @click="home">返回首页</button>
<button @click="query">query</button>
</template>

<script>
methods: {
    fanhui() {
        this.$router.go(-1)
    },
    qianjin() {
        this.$router.go(1)
    },
    home() {
        this.$router.push("/") //push
    },
    query() {
        this.$router.push({path:'/',query:{a:111,b:222}}) //push
    }
}
</script>