Vue-router使用

Posted 2020-11-09 leigepython

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

 

$route.name

 

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

相当于封装路由
2、利用导航 <router-link :"to={name:‘h1‘,params:{username:‘zhilei‘}}"></router-link>
页面展示:]
{{$route.params.username}}

url传参:
3、利用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>

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


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

七、别名的使用

1、{
path: ‘/hi1‘,
component: Hi1,
alias:‘/jspang‘
}
2、只有子url别名上面的，不能上面的另名下面的，例如下面的就不行

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

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

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

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

九、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:‘/‘,
}

]
})

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


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

可以配置地方：
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>

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