1.1 什么是路由？
Vue Router官方文档：https://router.vuejs.org/zh/installation.html
-
使用路由文件：
- 1.引用vue-router路由js文件
- 2.创建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.创建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>'
}
// 创建 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.创建 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.创建 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.创建 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 嵌套路由
嵌套路由的应用场景：每个网站中的首部与网站的底部一般不会改变，变化的内容一般在中间部分。
文章来源：https://www.toymoban.com/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.创建 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 嵌套路由案例
文章来源地址https://www.toymoban.com/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.创建 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 对应的 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>头部内容</h1>'
}
var content = {
template:'<h1>内容内容</h1>'
}
var footer = {
template:'<h1>脚部内容</h1>'
}
// 2.创建 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>
到了这里，关于【Vue框架】Vue2中Vue.js路由—路由介绍、路由控制组件切换、路由重定向、路由传参、嵌套路由、路由布局（附源码详解）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
