vue2.0 路由 學習筆記
阿新 • • 發佈：2019-02-14
vue2.0 路由:
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 佈局
<router-link to="/home">主頁</router-link>
<router-view></router-view>
------------------------------------------
路由巢狀:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
:id
:username
------------------------------------------
http://router.vuejs.org/zh-cn/index.html
基本使用:
1. 佈局
<router-link to="/home">主頁</router-link>
<router-view></router-view>
2. 路由具體寫法，重定向{path:'*', redirect:'/home'}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .router-link-active{ font-size: 20px; color: green; } </style> </head> <body> <div id="box"> <div> <router-link to="/home">主頁</router-link> <router-link to="/news">新聞</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script> // 元件 var Home={ template:"<h3>我是主頁</h3>" } var News={ template:"<h3>我是新聞</h3>" } // 配置路由 var routes=[ {path:'/home',component:Home}, {path:'/news',component:News}, {path:'*',redirect:'/home'} ]; // 生成路由例項 var router=new VueRouter({ routes:routes }) // 把路由掛到vue上 new Vue({ el:"#box", router:router }) </script> </body> </html>
------------------------------------------
路由巢狀:
/user/username
const routes=[
{path:'/home', component:Home},
{
path:'/user',
component:User,
children:[ //核心
{path:'username', component:UserDetail}
]
},
{path:'*', redirect:'/home'} //404
];
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .router-link-active{ font-size: 20px; color: green; } </style> </head> <body> <div id="box"> <div> <router-link to="/home">主頁</router-link> <router-link to="/user">使用者</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script> // 元件 var Home={ template:"<h3>我是主頁</h3>" } var User={ template:` <div> <h3>我是使用者資訊</h3> <ul> <li><router-link to="/user/username">某使用者</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` } var UserDetail={ template:'<div>我是某使用者</div>' } // 配置路由 var routes=[ {path:'/home',component:Home}, { path:'/user', component:User, children:[ {path:'username',component:UserDetail} ] }, {path:'*',redirect:'/home'} ]; // 生成路由例項 var router=new VueRouter({ routes:routes }) // 把路由掛到vue上 new Vue({ el:"#box", router:router }) </script> </body> </html>
------------------------------------------
路由+引數：
/user/strive/age/10:id
:username
:age
路由例項方法:
router.push({path:'home'}); //直接新增一個路由,表現切換路由，本質往歷史記錄裡面新增一個
router.replace({path:'news'}) //替換路由，不會往歷史記錄裡面新增
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .router-link-active{ font-size: 20px; color: green; } </style> </head> <body> <div id="box"> <input type="button" name="" value="新增一個路由" @click="push"> <input type="button" name="" value="替換一個路由" @click="replace"> <div> <router-link to="/home">主頁</router-link> <router-link to="/user">使用者</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> <script> // 元件 var Home={ template:"<h3>我是主頁</h3>" } var User={ template:` <div> <h3>我是使用者資訊</h3> <ul> <li> <router-link to="/user/strive/age/10"> Strive </router-link> </li> <li> <router-link to="/user/blue/age/40"> Blue </router-link> </li> <li> <router-link to="/user/eric/age/70"> Eric </router-link> </li> </ul> <div> <router-view></router-view> </div> </div> ` } var UserDetail={ template:'<div>{{$route.params}}</div>' } // 配置路由 var routes=[ {path:'/home',component:Home}, { path:'/user', component:User, children:[ { path:':username/age/:age', component:UserDetail } ] }, {path:'*',redirect:'/home'} ]; // 生成路由例項 var router=new VueRouter({ routes:routes }) // 把路由掛到vue上 new Vue({ router:router, methods:{ push(){ router.push({path:'/home'}) }, replace(){ router.push({path:'/user'}) } } }).$mount("#box") </script> </body> </html>
------------------------------------------
路由跳轉配合 animate.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
.router-link-active{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div id="box">
<input type="button" name="" value="新增一個路由" @click="push">
<input type="button" name="" value="替換一個路由" @click="replace">
<div>
<router-link to="/home">主頁</router-link>
<router-link to="/user">使用者</router-link>
</div>
<div>
<transition name="" mode="" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<router-view></router-view>
</transition>
</div>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script>
// 元件
var Home={
template:"<h3>我是主頁</h3>"
}
var User={
template:`
<div>
<h3>我是使用者資訊</h3>
<ul>
<li>
<router-link to="/user/strive/age/10">
Strive
</router-link>
</li>
<li>
<router-link to="/user/blue/age/40">
Blue
</router-link>
</li>
<li>
<router-link to="/user/eric/age/70">
Eric
</router-link>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
}
var UserDetail={
template:'<div>{{$route.params}}</div>'
}
// 配置路由
var routes=[
{path:'/home',component:Home},
{
path:'/user',
component:User,
children:[
{
path:':username/age/:age',
component:UserDetail
}
]
},
{path:'*',redirect:'/home'}
];
// 生成路由例項
var router=new VueRouter({
routes:routes
})
// 把路由掛到vue上
new Vue({
router:router,
methods:{
push(){
router.push({path:'/home'})
},
replace(){
router.push({path:'/user'})
}
}
}).$mount("#box")
</script>
</body>
</html>