目录
路由
路由基本使用
<!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>