目錄
路由
路由基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路由基本使用</title>
<script src="../../../thirdlib/vue/vue.js"></script>
<script src="../../../thirdlib/vue/vue-router.min.js"></script>
<style>
.myactive{
color:red;
font-weight: 800;
font-style: italic;
font-size: 40px;
text-decoration: underline;
background-color: green;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<!--
<a href="#/login">登錄</a>
<a href="#/register">註冊</a>
-->
<!--router-link默認渲染了一個a標籤，可以用tag設置渲染的標籤-->
<router-link to="/login" tag="span">登錄</router-link>
<router-link to="/register">註冊</router-link>
<!--這是vue-router提供的元素， 專門用來做佔位符的-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
var login = {
template:"<h1>登錄組件</h1>"
}
var register = {
template:"<h1>註冊組件</h1>"
}
//創建一個路由對象，當導入vue-router包之後，在window全局對象中有了一個構造函數，叫做VueRouter
//在new路由對象的時候，可以爲構造函數傳遞一個配置對象
var routerobj = new VueRouter({
routes:[//表示路由匹配規則
//每個路由規則都是一個對象，這個規則對象都有兩個必須的屬性
//屬性1是path，表示監聽哪個路由鏈接地址
//屬性2是component，表示如果 路由是前面匹配到的path，表示展示component屬性對應的組件
//注意：component屬性值必須是一個組件模板對象，不能是組件的引用名稱
//{path : '/', component : login},
{path : '/', redirect : '/login'},//重定向
{path : '/login', component : login},
{path : '/register', component : register}
] ,
linkActiveClass:'myactive'
});
var vm = new Vue({
el:"#app",
data:{
},
methods:{},
router:routerobj//將路由規則對象註冊到vm實例上，用來監聽url地址
})
</script>
</body>
</html>
路由規則中定義參數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路由規則中定義參數</title>
<script src="../../../thirdlib/vue/vue.js"></script>
<script src="../../../thirdlib/vue/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login?id=10&name=張三" tag="span">登錄</router-link>
<router-link to="/register/12/李四">註冊</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template:"<h1>登錄組件 --- {{ $route.query.id }}{{ $route.query.name }}</h1>",
created(){//組件生命週期鉤子
console.log(this.$route.query.name);
}
}
var register = {
template:"<h1>註冊組件</h1>",
created(){
console.log(this.$route.params.id);
console.log(this.$route.params.name);
}
}
var routerobj = new VueRouter({
routes:[
{path : '/', redirect : '/login'},//重定向
{path : '/login', component : login},
{path : '/register/:id/:name', component : register}
]
});
var vm = new Vue({
el:"#app",
data:{
},
methods:{},
router:routerobj
})
</script>
</body>
</html>
路由嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路由嵌套</title>
<script src="../../../thirdlib/vue/vue.js"></script>
<script src="../../../thirdlib/vue/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<router-link to="/account">account</router-link>
<router-view></router-view>
</div>
<template id="tmpl">
<div>
<h1>這是account組件</h1>
<router-link to="/account/login">登錄</router-link>
<router-link to="/account/register">註冊</router-link>
<router-view></router-view>
</div>
</template>
<script>
var account = {
template:"#tmpl"
}
var login = {
template:"<h3>登錄</h3>"
}
var register = {
template:"<h3>註冊</h3>"
}
var router = new VueRouter({
routes:[
{path : '/account', component : account, children:[
{path : 'login', component : login},
{path : 'register', component : register}
]}
// {path : '/account/login', component : login},
// {path : '/account/register', component : register}
]
});
var vm = new Vue({
el:"#app",
data:{
},
methods:{},
router:router
})
</script>
</body>
</html>
命名視圖實現經典佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>命名視圖實現經典佈局</title>
<script src="../../../thirdlib/vue/vue.js"></script>
<script src="../../../thirdlib/vue/vue-router.min.js"></script>
<style>
html, body, h1{
margin: 0;
padding: 0;
font-size: 20px;
}
.header{
height: 80px;
background-color: orange;
}
.container{
display: flex;
height: 600px;
}
.left{
background-color: lightblue;
flex: :2;
}
.main{
background-color: lightcoral;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
var header = {
template:'<h1 class="header">header頭部區域</h1>'
}
var left = {
template:"<h1 class='left'>left區域</h1>"
}
var main = {
template:"<h1 class='main'>main主體區</h1>"
}
var router = new VueRouter({
routes:[
{path : '/', components : {
default:header,
left : left,
main:main
}}
/*{path : '/header', component : header}
{path : '/left', component : left},
{path : '/main', component : main}*/
]
});
var vm = new Vue({
el:"#app",
data:{
},
methods:{},
router:router
})
</script>
</body>
</html>