（6）Vue基础5-路由vue-router
Vue 的路由
（1）初识路由
路由机制分为前端路由和后端路由，前端路由常用的为hash和histoy模式。
学习vue-router前，搜先要了解三个基本概念：route、routes、router
- route 表示一条路由，单数形式
- routes 表示一组路由，把route的每一条路由组合起来，形成一个数组
- router 表示一个机制，充当路由管理员的角色
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="./vue/vue-router.js"></script>
<style type="text/css"></style>
</head>
<body>
<div class="wrap">
<div id="app">
<router-link tag="span" to="/login">登录</router-link>
<router-view></router-view>
</div>
<template id="log">
<div>
<h2>登录</h2>
<div>
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入用户密码">
</div>
</div>
</template>
</div>
<script type="text/javascript">
// 1.header标签里引入router.js
// 2.DOM结构<router-link>
// 3.JS逻辑代码
// 对于JSDE逻辑代码部分：
// 1.DOM结构中存在路由router-link，to绑定的是进入到的对象内容
// 2.JS中实例VueRouter()函数，其中有参数routes定义路由数组
// 3.routes路由数组中path和router-link中to属性绑定内容一致，component绑定要显示内容的组件名
// 4.在Vue实例化对象中，要使用router声明定义的路由
// 5.
var login = {
template:"#log"
}
var routerObj = new VueRouter({
routes:[
{path:"/login",component:login}
]
});
var vm = new Vue({
el:"#app",
router:routerObj
})
</script>
</body>
</html>
（2）vue-router
（3）用户登录注册案例
（4）动态路由
动态路由是给路径的动态部分匹配不同的id。匹配可以传递参数的路由，传递参数有多种方式：
- 1、query方式，使用？的方式传参，将传递的参数放在? 使用&连接多个参数。
- 2、params传参方式，一般不需要通过查询字符串传参，通常会搭配路由的history模式，将参数放在路径中标或隐藏。
query方式传参：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态路由query传参</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="./vue/vue-router.js"></script>
</head>
<body>
<div class="wrap">
<div id="app">
<router-link to="/user?id=10&name=admin">登录</router-link>
<router-view></router-view>
</div>
<template id="user">
<div>
<h2>我是组件模板</h2>
<div>
<p>id：{{this.$route.query.id}}</p>
<p>name：{{this.$route.query.name}}</p>
</div>
</div>
</template>
</div>
<script type="text/javascript">
var user = {
template:"#user",
created(){
console.log(this.$route)
}
}
var router = new VueRouter({
routes:[
//里面的参数一定包含的关键词是path和component不是复数s
{path:"/user", component:user}
]
})
var vm = new Vue({
el:"#app",
router,
})
</script>
</body>
</html>
params方式传参：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态路由params传参</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="./vue/vue-router.js"></script>
</head>
<body>
<div class="wrap">
<div id="app">
<router-link to="/user/10/admin">登录</router-link>
<router-view></router-view>
</div>
<template id="user">
<div>
<h3>我是params传参</h3>
<p>id:{{this.$route.params.id}}</p>
<p>id:{{this.$route.params.name}}</p>
</div>
</template>
</div>
<script type="text/javascript">
var user = {
template:"#user",
created(){
console.log(this.$route)
}
}
var router = new VueRouter({
routes:[
// 前面带冒号的是动态参数，路由会很据出现的位置顺序自动匹配
{path:"/user/:id/:name",component:user}
]
})
var vm = new Vue({
el:"#app",
router
})
</script>
</body>
</html>
（5）嵌套路由
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套路由</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="./vue/vue-router.js"></script>
<style type="text/css">
.wrap{width:1000px; margin:0 auto;}
.li_list{display: inline-block; width:150px; float: left;}
.li_list li{height: 40px; line-height: 40px; width:100%;background-color: #e02e24;font-weight: 800; list-style: none; text-align: center; margin-bottom: 10px; }
.conc{display: inline-block; width:60%; margin-left:20px; float: left;}
</style>
</head>
<body>
<div class="wrap">
<div id="app">
<ul class="li_list">
<router-link to="/about" tag="li">关于公司</router-link>
<router-link to="/contact" tag="li">联系我们</router-link>
</ul>
<router-view></router-view>
</div>
<!-- 关于我们 -->
<template id="about">
<div class="conc">
<h3>浙江科技有限公司</h3>
<router-link to="/about/detail" >公司简介</router-link>
<router-link to="/about/governance">公司治理</router-link>
<router-view></router-view>
</div>
</template>
<template id="detail">
<div>
<p>我们是一家非常与爱国主义情怀的公司</p>
</div>
</template>
<template id="governance">
<div>
<p>公司坚持以客户为中心、以奋斗者为本... ...</p>
</div>
</template>
<!-- 联系我们 -->
<template id="contact">
<div class="conc">
<h3>联系我们</h3>
<p>服务内容包含java培训，vue培训，javaScript培训，SQLServer培训</p>
</div>
</template>
</div>
<script type="text/javascript">
// 关于公司对应的内容
var about={
template:"#about"
}
// 子组件对应的内容
var detail ={
template:"#detail"
}
var governance={
template:"#governance"
}
// 联系我们对应的内容
var contact={
template:"#contact"
}
var router = new VueRouter({
routes:[
{path:"/",redirect:"/about"},
{path:"/about",component:about,
children:[
{path:"detail",component:detail},
{path:"governance",component:governance},
]},
{path:"/contact",component:contact},
]
})
var vm = new Vue({
el:"#app",
router,
})
</script>
</body>
</html>
（6）$router.push
路由编程式导航，传参也有两种方式，params和query
query传参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程式导航router.push</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="./vue/vue-router.js"></script>
</head>
<body>
<div class="wrap">
<div id="app">
<button @click="goStart">跳转</button>
<router-view></router-view>
</div>
<template id="user">
<div>
<p>用户名：{{this.$route.query.name}}</p>
</div>
</template>
</div>
<script type="text/javascript">
var user = {
template:"#user"
}
var router = new VueRouter({
routes:[
{path:"/user",component:user}
]
})
var vm = new Vue({
el:"#app",
router,
methods:{
goStart(){
this.$router.push({
path:"/user",
query:{
name:"admin"
}
}).catch(err => {
console.log("all good")
})
}
}
})
</script>
</body>
</html>
params传参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程式导航router.push</title>
<script type="text/javascript" src="./vue/vue.js"></script>
<script type="text/javascript" src="./vue/vue-router.js"></script>
</head>
<body>
<div class="wrap">
<div id="app">
<button @click="goStart">跳转</button>
<router-view></router-view>
</div>
<template id="user">
<div>
获取的时候使用的是$route,改变的时候使用的$router
<p>用户名：{{this.$route.params.name}}</p>
</div>
</template>
</div>
<script type="text/javascript">
var user = {
template:"#user"
}
var router = new VueRouter({
routes:[
{path:"/user",component:user, name:"user"}
]
})
var vm = new Vue({
el:"#app",
router,
methods:{
goStart(){
this.$router.push({
name:"user",
params:{
name:"admin"
}
}).catch(err => {
console.log("all good")
})
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号