1、简介
使用Vue.js开发SPA（Single Page Application）单页面应用
根据不是url地址，显示不同的内容，但是显示在同一个页面中，称为单页面应用。
基本用法
a.布局
b.配置路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router路由</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<style type="text/css">
/*.router-link-active{
font-size:20px;
color:yellow;
}*/
.action{
font-size:25px;
color:yellow;
}
</style>
</head>
<body>
<div id="itany">
<div>
<!-- 使用router-link组件来定义导航,to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<!-- router-view 用来显示路由内容 -->
<router-view></router-view>
<!-- <router-view></router-view> -->
</div>
</div>
<script type="text/javascript">
//1.定义组件
var Home = {
template:'<h3>我是主页</h3>'
}
var News = {
template:'<h3>我是新闻页</h3>'
}
//2.配置路由
const routes = [
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',redirect:'/home'} //重定向
]
//3.创建路由实例
const router = new VueRouter({
routes, //简写 相当于 routes = routes
// mode:'history',
linkActiveClass:'action'
})
//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router//注入路由
})
</script>
</body>
</html>
3.路由嵌套和参数的传递
传参的两种形式：
a.查询字符串：login？name=tom&pwd=13
b.rest风格url:regist/alice/456
4.路由实例方法
router.push()添加路由，功能上与<route-link>相同
router.replace() 替换路由，不产生历史记录
5.路由结合动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>参数的传递</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<style type="text/css">
/*.router-link-active{
font-size:20px;
color:yellow;
}*/
.action{
font-size:25px;
color:yellow;
}
</style>
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id="itany">
<div>
<!-- 使用router-link组件来定义导航,to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<!-- router-view 用来显示路由内容 -->
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bouneOutRight">
<router-view></router-view>
</transition>
<!-- <router-view></router-view> -->
</div>
<br>
<button @click="push">添加路由</button>
<button @click="replace">替换路由</button>
</div>
<template id="user">
<div>
<h3>用户信息</h3>
<ul>
<router-link to="/user/login?name=top&pwd=13" tag="li">用户登录</router-link>
<router-link to="/user/regist/alice/456" tag="li" >用户注册</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script type="text/javascript">
//1.定义组件
var Home = {
template:'<h3>我是主页</h3>'
}
var User = {
template:'#user'
}
var Login = {
template:'<h4>用户的登录。。。获取参数：{{$route.query}}</h4>'
}
var Regist = {
template:'<h4>用户的注册。。。获取参数：{{$route.params}},{{$route.path}}</h4>'
}
//2.配置路由
const routes = [
{
path:'/home',
component:Home
},
{
path:'/user',
component:User,
children:[
{
path:'login',
component:Login
},
{
path:'regist/:username/:password',
component:Regist
}
]
},
{
path:'*',
redirect:'/home'
} //重定向
]
//3.创建路由实例
const router = new VueRouter({
routes, //简写 相当于 routes = routes
// mode:'history',
linkActiveClass:'action'
})
//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router,//注入路由
methods:{
push(){
router.push({path:'home'});//切换路由
},
replace(){
router.replace({path:'user'})
}
}
})
</script>
</body>
</html>
网友评论