Vue-router使用

Vue路由:
--------------------------------------------------------
1 、Vue-rouer入门
2 、子路由
3 、路由传参
4 、多路由区域操做
5 、重定向
6 、过渡动画
7 、404页面
8 、钩子函数
9 、编程式导航

 

$route.name

 

传递参数几种方式:
一、利用name {{$route.name}}

至关于封装路由
二、利用导航 <router-link :"to={name:'h1',params:{username:'zhilei'}}"></router-link>
页面展现:]
{{$route.params.username}}

url传参:
三、利用url 必需要加冒号
{
path:'/params/:newsId/:newsTitle',
component:Params
}

调用:
<router-link to="/params/198/jspang website is very good">params</router-link>

页面展现:
<p>新闻ID：{{ $route.params.newsId}}</p>
<p>新闻标题：{{ $route.params.newsTitle}}</p>

6、重定向在路由里面配置(redirect)
{
path:'/goback',
redirect:'/'
}


带参数重定向:
{
path:'/params/:newsId(\\d)/:newsTitle',
component:Params
},
{
path:'/goback/:newsId(\\d)/:newsTitle',
redirect:'/params/:newsId(\\d)/:newsTitle',
}

7、别名的使用

一、{
path: '/hi1',
component: Hi1,
alias:'/jspang'
}
二、只有子url别名上面的，不能上面的另名下面的，例以下面的就不行

{
path: '/',
component: Hello,
alias:'/home'
}

8、路由中的过滤动画
一、设置：
<transition name="fade" mode="out-in">
<router-view ></router-view>
</transition>

二、样式：
.fade-enter {
opacity:0;
}
.fade-enter-active{
transition:opacity .5s;
}

.fade-leave{
opacity:1;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}

9、mode的两个值
1)history
2)hash
配置:
export default new Router({
mode:'history',
routes: [
{
path: '/',
components: {
default:Good,
right:Hi2,
left:Hi1
},
alias:"/first_page"
},
//多域名路由
{
path: '/hi',
components: {
default:Home,
left:Hi2,
right:Hi1
}
},
{
path:'/params/:newsId(\\d)/:newsTitle',
component:Params
},
{
// path:'/goback/:newsId(\\d)/:newsTitle',
path:'/goback',
redirect:'/',
}

]
})

10、404页面的设置
第一步：在路由的结束加下
先定义一个404页面
{path:"*",component:Error}


11、路由中的钩子
钩子函数：生命周期中每一个环节执行的函数

能够配置地方：
1)路由
{
path: '/',
components: {
default:Good,
right:Hi2,
left:Hi1
},
alias:"/first_page",
beforeEnter(to,from,next){
console.log(to)
console.log(from)
console.log("我立刻要进入主页了...")
}
},
2)组件模板中配置
<script>
export default {
name: 'Good',
data () {
return {
msg: '欢迎来到商品页'
}
},
beforeRouteEnter(to,from,next){
console.log("进入首页前");
next()
},
beforeRouteLeave(to,from,next){
console.log("离开首页前")
next()
}
}
</script>

12、编程式导航 一、跳转到上一个路由 二、路转到下一个路由 三、直接跳转，用于逻辑判断 export default { name: 'App', methods:{ go(){ this.$router.go(-1) }, ba(){ this.$router.go(1) }, first(){ this.$router.push("/"); } } }