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("/"); } } }