Vue中路由的使用
程序员文章站
2024-02-14 21:19:52
...
1、V-router的基本使用
添加vue-router.js包
在vue实例中添加router：VueRouter的实例名
在页面上添加<router-link to="url"></router-link> 可以添加tag属性， 如果使用a标签则需要在URL中的前头添加#
routes中的中可以实现重定向
<style type="text/css">
.router-link-active,
.myactive {
color: blueviolet;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: crimson;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
</body>
<script type="text/javascript">
var login = {
template:'<h3>登录页面</h3>'
}
var register = {
template:'<h3>注册页面</h3>'
}
/* 组件模板必须在路由前定义 */
var routername = new VueRouter({
routes:[
{path:'/',redirect:'/login'},/* 重定向路由 */
{path:'/login',component:login},
{path:'/register',component:register}
],
linkActiveClass: 'myactive'/* 设置选中高亮 */
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router:routername
})
</script>
2、设置路由高亮的两种方式
1. 使用样式类 .router-link-active
2. 在VueRouter的构造中添加linkActiveClass=‘样式类名’属性
3、路由中的动画
使用<transition></transition>包裹，可以添加mode属性，用来显示动画的模式
4、路由中传参的方式
-
使用query传参
传：在URL上使用？传参
获取：使用this.$route.query -
使用params传参
传：在URL上使用：传参
获取：使用this.$route.params
<body>
<div id="app">
<router-link to="/login?name=xiaomi&age=12">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
var login ={
template:'<h5>登录页面--------{{$route.query.name}}========{{$route.query.age}}</h5>',
data:function(){
return {data:hello}
},
methods:{}
}
var register = {
template:'<h6>注册页面</h6>'
}
var router = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:"#app",
data:{},
methods:{},
router
})
</script>
<body>
<div id="app">
<!-- 使用params方式传参 -->
<router-link to="/login/:xiaomi/:12">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
var login ={ /* 使用params方式传参 */
template:'<h5>登录页面--------{{$route.params.name}}========{{$route.params.age}}</h5>',
data:function(){
return {data:hello}
},
methods:{}
}
var register = {
template:'<h6>注册页面</h6>'
}
var router = new VueRouter({
routes:[
{path:'/',redirect:'/login'},/* 使用params方式传参 */
{path:'/login/:name/:age',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:"#app",
data:{},
methods:{},
router
})
</script>
5、使用Childen实现路由嵌套
<body>
<div id="app">
<router-link to="/manager">管理</router-link>
<router-view></router-view>
</div>
<template id="mangaerPage">
<div>
<h3>请登录或者注册</h3>
<router-link to="/manager/login">登录</router-link>
<router-link to="/manager/register">注册</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script type="text/javascript">
var manager ={
template:'#mangaerPage'
}
var login ={
template:'<h3>登录管理</h3>'
}
var register = {
template:'<h3>注册管理</h3>'
}
/* 嵌套路由的使用 */
var router = new VueRouter({
routes:[
{path:'/manager',component:manager,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router
})
</script>