1.1 什么是路由？
Vue Router官方文檔：https://router.vuejs.org/zh/installation.html
-
使用路由文件：
- 1.引用vue-router路由js文件
- 2.創(chuàng)建router對象
- 3.在vm對象中注冊router對象
- 4.在視圖中使用 router-view 標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
一、使用路由文件:
1.引用vue-router路由js文件
2.創(chuàng)建router對象
3.在vm對象中注冊router對象
4.在視圖中使用 router-view 標簽
-->
<router-view></router-view>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
var login = {
template:'<h1>登錄組件</h1>'
}
var register = {
template:'<h1>注冊組件</h1>'
}
// 創(chuàng)建 router對象
var router = new VueRouter({
routes:[
{path:'/login', component:login},
{path:'/abc', component:register},
]
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components:{
},
router
})
</script>
</body>
</html>
1.2 路由控制組件切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.router-link-active{color: red;}
</style>
</head>
<body>
<div id="app">
<!-- 寫法一 -->
<!-- <a href="#/login">登錄</a> -->
<!-- <a href="#/abc">注冊</a> -->
<!-- 寫法二
router-link默認渲染成a標簽
如果需要改成其他標簽,使用屬性tag
點擊那個標簽會添加樣式類router-link-active,可以修改并增加樣式
-->
<router-link to="/login" tag="tag">登錄</router-link>
<router-link to="/abc">注冊</router-link>
<router-view></router-view>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
// 1.定義組件
var login = {
template:'<h1>登錄組件</h1>'
}
var register = {
template:'<h1>注冊組件</h1>'
}
// 2.創(chuàng)建 router對象
var router = new VueRouter({
routes:[
{path:'/login', component:login},
{path:'/abc', component:register},
]
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components:{
},
router
})
</script>
</body>
</html>
1.3 路由重定向以及動畫路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.router-link-active{color: red;}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 寫法一 -->
<!-- <a href="#/login">登錄</a> -->
<!-- <a href="#/abc">注冊</a> -->
<!-- 寫法二
router-link默認渲染成a標簽
如果需要改成其他標簽,使用屬性tag
點擊那個標簽會添加樣式類router-link-active,可以修改并增加樣式
-->
<router-link to="/login" tag="tag">登錄</router-link>
<router-link to="/abc">注冊</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
// 1.定義組件
var login = {
template:'<h1>登錄組件</h1>'
}
var register = {
template:'<h1>注冊組件</h1>'
}
// 2.創(chuàng)建 router對象
var router = new VueRouter({
routes:[
{path:'/', redirect:'/login'},
{path:'/login', component:login},
{path:'/abc', component:register},
]
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components:{
},
router
})
</script>
</body>
</html>
1.4 路由傳參
- 第一種傳參形式——路由路徑進行傳參，如：/login?id=20
- 第二種傳參形式——路由占位符進行傳參，如：/abc/100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.router-link-active{color: red;}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(200px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- 寫法一 -->
<!-- <a href="#/login">登錄</a> -->
<!-- <a href="#/abc">注冊</a> -->
<!-- 寫法二
router-link默認渲染成a標簽
如果需要改成其他標簽,使用屬性tag
點擊那個標簽會添加樣式類router-link-active,可以修改并增加樣式
-->
<router-link to="/login?id=20" tag="tag">登錄</router-link>
<router-link to="/abc/100">注冊</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
// 1.定義組件
var login = {
template:'<h1>登錄組件=={{id}}</h1>',
data(){
return{
id:''
}
},
created(){
console.log(this.$route.query.id);
this.id = this.$route.query.id;
}
}
var register = {
template:'<h1>注冊組件=={{id}}</h1>',
data(){
return{
id:''
}
},
created(){
console.log(this.$route.params.id);
this.id = this.$route.params.id;
}
}
// 2.創(chuàng)建 router對象
var router = new VueRouter({
routes:[
{path:'/', redirect:'/login'},
{path:'/login', component:login},
{path:'/abc/:id', component:register},
]
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components:{
},
router
})
</script>
</body>
</html>
1.5 嵌套路由
嵌套路由的應(yīng)用場景：每個網(wǎng)站中的首部與網(wǎng)站的底部一般不會改變，變化的內(nèi)容一般在中間部分。
文章來源：http://www.zghlxwxcb.cn/news/detail-400559.html
1.5.1 非嵌套路由案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/user">用戶</router-link>
<router-view></router-view>
</div>
<!-- 用戶組件視圖 -->
<template id="temp">
<div>
<h1>User組件</h1>
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>
</div>
</template>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
// 1.定義用戶組件、登錄組件、注冊組件
var user = {
template:'#temp'
}
var login = {
template:'<h1>登錄組件</h1>'
}
var register = {
template:'<h1>注冊組件</h1>'
}
// 2.創(chuàng)建 router對象
var router = new VueRouter({
routes:[
{path:'/user',component:user},
{path:'/login',component:login},
{path:'/register',component:register},
]
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components:{
},
router
})
</script>
</body>
</html>
1.5.2 嵌套路由案例
文章來源地址http://www.zghlxwxcb.cn/news/detail-400559.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/user">用戶</router-link>
<router-view></router-view>
</div>
<!-- 用戶組件視圖 -->
<template id="temp">
<div>
<h1>User組件</h1>
<router-link to="/user/login">登錄</router-link>
<router-link to="/user/register">注冊</router-link>
<div></div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
// 1.定義用戶組件、登錄組件、注冊組件
var user = {
template:'#temp'
}
var login = {
template:'<h1>登錄組件</h1>'
}
var register = {
template:'<h1>注冊組件</h1>'
}
// 2.創(chuàng)建 router對象
var router = new VueRouter({
routes:[
{
path:'/user',
component:user,
// 注意子路由children下的路由寫法
children:[
{path:'login',component:login},
{path:'register',component:register}
],
},
]
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components:{
},
router
})
</script>
</body>
</html>
1.6 路由布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
在一個頁面顯示多個組件
default:header 對應(yīng)的 router-view 可以不寫name屬性
-->
<div id="app">
<router-view></router-view>
<router-view name="content"></router-view>
<router-view name="footer"></router-view>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
// 1.定義
var header = {
template:'<h1>頭部內(nèi)容</h1>'
}
var content = {
template:'<h1>內(nèi)容內(nèi)容</h1>'
}
var footer = {
template:'<h1>腳部內(nèi)容</h1>'
}
// 2.創(chuàng)建 router對象
var router = new VueRouter({
routes:[
{path:'/', components:{
default:header,
'content':content,
'footer':footer
}},
]
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components:{
},
router
})
</script>
</body>
</html>
到了這里，關(guān)于【Vue框架】Vue2中Vue.js路由—路由介紹、路由控制組件切換、路由重定向、路由傳參、嵌套路由、路由布局（附源碼詳解）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
